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

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

GitHub源码：

Chart.js文档：

步骤：

html部分：

rush:xhtml;">

javascript部分：

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

曲线图（Line chart）：

html:

rush:xhtml;">

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

rush:js;">

数据结构：

rush:js;"> //数据结构（数据参数设置） var data = { //折线图需要为每个数据点设置一标签。这是显示在X轴上。 labels: ["January",200] }] };

图标参数：

rush:js;"> 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,.1)",// X,Y轴的宽度 scalelinewidth: 1,// 刻度是否显示标签,即Y轴上是否显示文字 scaleShowLabels: true,// Y轴上的刻度,即文字 scaleLabel: "<%=value%>",// 字体 scaleFontFamily: "'Arial'",// 文字大小 scaleFontSize: 16,// 文字样式 scaleFontStyle: "normal",// 文字颜色 scaleFontColor: "#666",// 是否显示网格 scaleShowGridLines: true,// 网格颜色 scaleGridLineColor: "rgba(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文件引入部分省略：（之后的图表类型也同样省略!）

rush:js;">

效果图：

柱状图：

rush:js;"> new Chart(ctx).Bar(data,options);//简记，options可缺省

数据结构：

rush:js;"> var data = { labels : ["January",datasets : [ { fillColor : "rgba(220,strokeColor : "rgba(220,data : [65,40] },{ fillColor : "rgba(151,strokeColor : "rgba(151,data : [28,100] } ] }

图标参数：

rush:js;"> Bar.defaults = { //网格线是否在数据线的上面 scaleOverlay : false,//y轴每个刻度的宽度 scaleStepWidth : null,//Y轴起始值 scaleStartValue: null,即Y轴上是否显示文字 scaleShowLabels: false,// 文字大小 scaleFontSize: 12,// 文字颜色 scaleFontColor: "#666",// 网格宽度 scaleGridlinewidth: 1,//Bar Chart图表特定参数： //是否绘制柱状条的边框 barShowstroke : true,//柱状条边框的宽度 barstrokeWidth : 2,//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值) barValueSpacing :5,//每组柱状条组中柱状条之间的间距 barDatasetSpacing :5,// 是否显示提示 showTooltips: true,// 动画完成时的执行函数 onAnimationComplete: null }

部分javascript实例

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

效果图：

饼图：

javascript:

rush:js;"> new Chart(ctx).Pie(data,options);

数据结构：

rush:js;"> 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'

}
];

图标参数：

rush:js;"> 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实例：

rush:js;"> var ctx=document.getElementById("pieChart").getContext("2d"); window.pieChart=new Chart(ctx).Pie(data,{ //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色） segmentShowstroke : true,//每段扇区边框的宽度 segmentstrokeWidth :2,//Function - 动画完成时执行的函数 //onAnimationComplete : null });

效果图：

环形图：

javascript:

rush:js;"> new Chart(ctx).Doughnut(data,options);

数据结构：

rush:js;"> //数据结构（与饼图相似） 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" }];

图标参数：

rush:js;"> 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

}

效果图：