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

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

github源码： https://github.com/nnnick/chart.js

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>

效果图：

柱状图：

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,
   });

效果图：

饼图：

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
  });

效果图：

环形图：

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总共有六大图表：除此之外，还有剩下两种：雷达图或蛛网图、极地区域图，读者请自行参考：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中的六种图表，js部分大致分为数据结构、图表参数（通用参数以及各自特有参数）和实例化引用三大部分，而数据的动态加载可在数据结构中的data属性传入json等数据文件或变量。在多处实战中可能需要用到数据图表，呈现给用户更好的用户体验，此次学习简记以便日后复习、使用！希望对大家的学习有所帮助，也希望大家多多支持。