首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

Posted in Javascript onMay 22, 2018

Chart.js：用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于HTML5 canvas技术，Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k）。值得推荐学习！

GitHub源码： https://github.com/nnnick/Chart.js

Chart.js文档：http://www.bootcss.com/p/chart.js/

步骤：

html部分：

<canvas id="myChart" width="400" height="400"></canvas>

javascript部分：

  1. 引入Chart.js文件；
  2. 创建图表：实例化Chart对象（获取DOM节点取得2d context环境后实例化）；
  3. 实例化Chart对象后就继续创建具体类型的图表了；

曲线图（Line chart）：

html:

<canvas id="myChart" width="600" height="400"></canvas>

javascript:(引入及两种使用方式)

<script src="js/Chart.min.js"></script>
<script type="text/javascript">
 //方式一：
 var ctx = document.getElementById("myChart").getContext("2d");;
 var MyNewChart = new Chart(ctx).Line(data); //这种方式是只加载数据集，（缺省options）不修改默认参数（简称法一）

 //数据结构（数据参数设置）
 var data = {
 //折线图需要为每个数据点设置一标签。这是显示在X轴上。
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
 datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };

</script>

数据结构：

//数据结构（数据参数设置）
 var data = {
 //折线图需要为每个数据点设置一标签。这是显示在X轴上。
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
 datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };

图标参数：

Line.defaults = {
  //网格线是否在数据线的上面
  scaleOverlay : false,

  //是否用硬编码重写y轴网格线
  scaleOverride : false,

  //** Required if scaleOverride is true **
  //y轴刻度的个数
  scaleSteps : null,

  //y轴每个刻度的宽度
  scaleStepWidth : 20,

  // Y 轴的起始值
  scaleStartValue : null,
  // Y/X轴的颜色
  scaleLineColor: "rgba(0,0,0,.1)", 
  // X,Y轴的宽度
  scaleLineWidth: 1,
  // 刻度是否显示标签, 即Y轴上是否显示文字
  scaleShowLabels: true,
  // Y轴上的刻度,即文字
  scaleLabel: "<%=value%>",
  // 字体
  scaleFontFamily: "'Arial'",
  // 文字大小
  scaleFontSize: 16,
  // 文字样式
  scaleFontStyle: "normal",
  // 文字颜色
  scaleFontColor: "#666",
  // 是否显示网格
  scaleShowGridLines: true,
  // 网格颜色
  scaleGridLineColor: "rgba(0,0,0,.05)",
  // 网格宽度
  scaleGridLineWidth:2,
  // 是否使用贝塞尔曲线? 即:线条是否弯曲
  bezierCurve: true,
  // 是否显示点数
  pointDot: true,
  // 圆点的大小
  pointDotRadius:5,
  // 圆点的笔触宽度, 即:圆点外层白色大小
  pointDotStrokeWidth: 2,
  // 数据集行程(连线路径)
  datasetStroke: true,
  // 线条的宽度, 即:数据集
  datasetStrokeWidth: 2,
  // 是否填充数据集
  datasetFill: true,
  // 是否执行动画
  animation: true,
  // 动画的时间
  animationSteps: 60,
  // 动画的特效
  animationEasing: "easeOutQuart",
  // 动画完成时的执行函数
  /*onAnimationComplete: null*/
  }

（表示刚接触Chart.js，看到这图表参数整个人都懵了，还全程英文注释，呵呵~）

理解完图表参数后，就可以自定义图表参数啦，下面来看看具体事例用法：

html部分和js文件引入部分省略：（之后的图表类型也同样省略!）

<script type="text/javascript">
  //同样数据参数设置
  var data = {
  //折线图需要为每个数据点设置一标签。这是显示在X轴上。
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  //这边的thisId分别对应labels的id
   thisIds : [12,22,50,44,99,3,67],
  //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
  datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };
 window.onload = function() {
   var ctx = document.getElementById("myChart").getContext("2d");;
   //方式二：传入对象字面量去修改默认图标参数，自定义图表
   var MyNewChart = new Chart(ctx).Line(data, {
   // 网格颜色
   scaleGridLineColor: "rgba(255,0,0,1)",
   // Y/X轴的颜色
   scaleLineColor: "rgba(0,0,0,.1)",
   // 文字大小
   scaleFontSize: 16,
   // 文字颜色
   scaleFontColor: "#666",
   // 网格颜色
   scaleGridLineColor: "rgba(0,0,0,.05)",
   // 是否使用贝塞尔曲线? 即:线条是否弯曲
   // 是否执行动画
   animation: true,
   // 动画的时间
   animationSteps: 60,
   // 动画完成时的执行函数
   onAnimationComplete: function(){
    console.log("给x轴的lable对应的id：");
    console.log(data.thisIds);
   }
   });
  }
</script>

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

柱状图：

new Chart(ctx).Bar(data,options);//简记，options可缺省

数据结构：

var data = {
 labels : ["January","February","March","April","May","June","July"],
 datasets : [
 {
  fillColor : "rgba(220,220,220,0.5)",
  strokeColor : "rgba(220,220,220,1)",
  data : [65,59,90,81,56,55,40]
 },
 {
  fillColor : "rgba(151,187,205,0.5)",
  strokeColor : "rgba(151,187,205,1)",
  data : [28,48,40,19,96,27,100]
 }
 ]
}

图标参数：

Bar.defaults = {
  //网格线是否在数据线的上面
  scaleOverlay : false,

  //是否用硬编码重写y轴网格线
  scaleOverride : false,

  //** Required if scaleOverride is true **
  //y轴刻度的个数
  scaleSteps : null,
  //y轴每个刻度的宽度
  scaleStepWidth : null, 
  //Y轴起始值
  scaleStartValue: null,
  // Y/X轴的颜色
  scaleLineColor: "rgba(0,0,0,.1)",
   // X,Y轴的宽度
  scaleLineWidth: 1,
  // 刻度是否显示标签, 即Y轴上是否显示文字
  scaleShowLabels: false,
  // Y轴上的刻度,即文字
  scaleLabel: "<%=value%>",
  // 字体
  scaleFontFamily: "'Arial'",
   // 文字大小
  scaleFontSize: 12,
  // 文字样式
  scaleFontStyle: "normal",
  // 文字颜色 
  scaleFontColor: "#666",
  // 是否显示网格
  scaleShowGridLines: true,
  // 网格颜色
  scaleGridLineColor: "rgba(0,0,0,.05)",
  // 网格宽度
  scaleGridLineWidth: 1,

  //Bar Chart图表特定参数：
  //是否绘制柱状条的边框
  barShowStroke : true,
  //柱状条边框的宽度
  barStrokeWidth : 2,
  //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
  barValueSpacing :5,
  //每组柱状条组中柱状条之间的间距
  barDatasetSpacing :5,
  // 是否显示提示
  showTooltips: true, 

  // 是否执行动画
  animation: true,
  // 动画的时间
  animationSteps: 60,
  // 动画的特效
  animationEasing: "easeOutQuart",
  // 动画完成时的执行函数
  onAnimationComplete: null
  }

部分javascript实例

var barChart = new Chart(ctx).Bar(data, {
   scaleLabel: "$"+"<%=value%>",
   //是否绘制柱状条的边框
   barShowStroke: true,
   //柱状条边框的宽度
   barStrokeWidth: 2,
   //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
   barValueSpacing: 5,
   //每组柱状条组中柱状条之间的间距
   barDatasetSpacing: 5,
   });

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

饼图：

javascript:

new Chart(ctx).Pie(data,options);

数据结构：

var data=[
  {
  value:40,
  color:"#21F0EA",//背景色
  highlight:"#79E8E5",//高亮背景颜色
  label:'javascript'//文字标签
  },{
  value:60,
  color:"#E0E4CC",
  highlight:"#EAEDD8",
  label:'jquery'
  },{
  value:100,
  color:"#69D2E7",
  highlight:"#83E5F7",
  label:'html'

  }
 ];

图标参数：

Pie.defaults = {
   //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke : true,
   //设置每段行程的边框颜色
   segmentStrokeColor : "red",
   //心啊是每段扇区边框的宽度
   segmentStrokeWidth :2,
   //Boolean - 是否执行动画
   animation : true,
   //Number - 动画时间
   animationSteps : 100,
   //String - 动画的效果
   animationEasing : "easeOutBounce",
   //Boolean -是否旋转动画
   animateRotate : true,
   //Boolean - 是否动画缩放饼图中心（效果不错）
   animateScale : true,
   //Function - 火动画完成时执行的函数
   onAnimationComplete : null
  }

部分javascript实例：

var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
   //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke : true,
   //设置每段行程的边框颜色
   segmentStrokeColor : "red",
   //每段扇区边框的宽度
   segmentStrokeWidth :2,
   //Boolean - 是否执行动画
   animation : true,
   //Number - 动画时间
   animationSteps : 100,
   //String - 动画的效果
   animationEasing : "easeOutBounce",
   //Boolean -是否旋转动画
   animateRotate : true,
   //Boolean - 是否动画缩放饼图中心（效果不错）
   animateScale : true,
   //Function - 动画完成时执行的函数
   //onAnimationComplete : null
  });

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

环形图：

javascript:

new Chart(ctx).Doughnut(data,options);

数据结构：

//数据结构（与饼图相似）
  var data = [{
  value: 30,
  color: "#F7464A",
  highlight: "#FA7C7C",
  label: "angularJS"
  }, {
  value: 50,
  color: "#E2EAE9",
  highlight: "#F2F5F5",
  label: "juqery"
  }, {
  value: 100,
  color: "#D4CCC5",
  hightlight: "#DBD6D1",
  label: "javascript"
  }, {
  value: 40,
  color: "#949FB1",
  highlight: "#AFBCCE",
  label: "nodeJS"
  }, {
  value: 120,
  color: "#4D5360",
  highlight: "#767C86",
  label: "html"
  }];

图标参数：

Doughnut.defaults={
   //是否显示每段行程（即环形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke: true,
   //设置每段行程的边框颜色
   segmentStrokeColor: "#fff",
   //设置每段环形的边框宽度
   segmentStrokeWidth: 2,
   //图标中心剪切圆的比例（0为饼图，接近100则环形宽度越小）
   percentageInnerCutout: 50,
   //是否执行动画
   animation: true,
   //执行动画时间
   animationSteps: 100,
   //动画特效
   animationEasing: "easeOutBounce",
   //是否旋转动画
   animateRotate: true,
   //是否缩放图表中心
   animateScale: true,
   //动画完成时的回调函数
//   onAnimationComplete: null

  }

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

Chart.js总共有六大图表：除此之外，还有剩下两种：雷达图或蛛网图、极地区域图，读者请自行参考：Chart.js中文文档

那么，问题来了！？图表的图例怎么办？这货在应用中也是很常用的！经过多次的查阅，找到以下方法实现图例部分，膜拜一下各路大神先！除此之外，还可以动画完成后将各组数据自动显示，而不用手动查看各组数据！

直接上各部分代码：

html部分：

<h2>柱状图</h2>
<canvas id="barChart" width="400" height="300"></canvas>
<!--这里添加了用来放置图例的div标签-->
<div id="legend"></div>

css部分：（不设置基础样式的话，可能看不出预期的效果）

<style>
  ul,li{
  list-style-type:none;;
  }
  ul>li{
  margin:5px auto;
  font-family: "微软雅黑";
  }
  span{
  display: inline-block;
  width:20px;height:20px;line-height: 20px;
  vertical-align:middle;
  margin-right:5px;
  }
 </style>

javascript部分：

window.onload = function() {
   var ctx = document.getElementById("barChart").getContext("2d");
   var barChart = new Chart(ctx).Bar(data, {
   showTooltips: false, // 是否显示提示,这里需要设置为false
   //模板
   legendTemplate: 
   '<ul class=\"<%=name.toLowerCase()%>-legend\">'+
   '<% for (var i=0; i<datasets.length; i++){%>'+
   '<li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span>'+
   '<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>'+
   '<%}%>'+
   '</ul>',
   onAnimationComplete: function() {//动画完成后显示对应的数据
    var ctx = this.chart.ctx;
    ctx.font = this.scale.font;
    ctx.fillStyle = this.scale.textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.datasets.forEach(function(dataset) {
    dataset.bars.forEach(function(bar) {
     ctx.fillText(bar.value, bar.x, bar.y);
    });
    });
   }
   });
   var legend = document.getElementById('legend');
   // 图例
   legend.innerHTML = barChart.generateLegend();
  }
 //数据结构：
  var data = {
  labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
  datasets: [{
   fillColor: "rgba(220,220,220,0.5)",
   strokeColor: "rgba(220,220,220,1)",
   data: [65, 59, 90, 81, 56, 55, 40],
   label: "本月销售额"//图例标签
  },{
   fillColor: "#69D2E7",
   strokeColor: "#B2E5ED",
   data: [54, 99, 72, 61, 86, 65, 84],
   label: "本季度销售额"
  }]
  };

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

总结：

Chart.js中的六种图表，js部分大致分为数据结构、图表参数（通用参数以及各自特有参数）和实例化引用三大部分，而数据的动态加载可在数据结构中的data属性传入json等数据文件或变量。在多处实战中可能需要用到数据图表，呈现给用户更好的用户体验，此次学习简记以便日后复习、使用！希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

- Author -

马灿发

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
云网广告中的代码，提示出错，大家找找
Nov 21 Javascript
JQuery 文本框使用小结
May 22 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
Vue.js实现的表格增加删除demo示例
May 22 #Javascript
详解Chart.js轻量级图表库的使用经验
May 22 #Javascript
VUE2.0中Jsonp的使用方法
May 22 #Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 #Javascript
基于mpvue的小程序项目搭建的步骤
May 22 #Javascript
安装vue-cli的简易过程
May 22 #Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
403(1) csgo(1) 404(1) xps(1) sout(1) CAD(1) svg(1) macos(1) Sentry(1) Sunmao(1)
You might like
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php时间戳转换代码详解
2019/08/04 PHP
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）
2015/07/18 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python多重继承新算法C3介绍
2014/09/28 Python
Python如何判断数独是否合法
2016/09/08 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
django-csrf使用和禁用方式
2020/03/13 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
pip安装提示Twisted错误问题（Python3.6.4安装Twisted错误）
2020/05/09 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
Tuckernuck官网：经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
如何选择使用结构还是类
2014/05/30 面试题
感恩节红领巾广播稿
2014/02/11 职场文书
公司运动会策划方案
2014/05/25 职场文书
党委班子剖析材料
2014/08/21 职场文书
实习生辞职信范文
2015/03/02 职场文书
大学生读书笔记范文
2015/07/01 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技