html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）

发布时间：2018-12-14 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-Chart.js | HTML5 图表绘制工具库（知识整理），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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部分：

javascript部分：

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

曲线图（Line chart）：

html:

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>

效果图：

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

效果图：

html5教程-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                 });

效果图：

html5教程-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                  }

效果图：

html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）

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

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

柱状图
  @H_126_228@

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

javascript部分：

window.onload = function() {                     var ctx = document.getElementById("barChart").getContext("2d");                     var barChart = new Chart(ctx).Bar(data, {                         showTooltips: false, // 是否显示提示,这里需要设置为false                         //模板                         legendTemplate:                          '
    -legend/">'+                         '<% for (var i=0; i'+                         '
  • /">'+                         '<%if(datasets[i].label){%><%=datasets[i].label%><%}%>
    • '+                         '<%}%>'+                         '
',                         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: "本季度销售额"                 }]             };

效果图：

html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）

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

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部分：

javascript部分：

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

曲线图（Line chart）：

html:

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>

效果图：

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

效果图：

html5教程-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                 });

效果图：

html5教程-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                  }

效果图：

html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）

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

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

柱状图

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

javascript部分：

window.onload = function() {                     var ctx = document.getElementById("barChart").getContext("2d");                     var barChart = new Chart(ctx).Bar(data, {                         showTooltips: false, // 是否显示提示,这里需要设置为false                         //模板                         legendTemplate:                          '
    -legend/">'+                         '<% for (var i=0; i'+                         '
  • /">'+                         '<%if(datasets[i].label){%><%=datasets[i].label%><%}%>
    • '+                         '<%}%>'+                         '
',                         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: "本季度销售额"                 }]             };

效果图：

html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）全部内容，希望文章能够帮你解决html5教程-Chart.js | HTML5 图表绘制工具库（知识整理）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：AngularAngularAngularJSClassCSSCSSdivDOMHTMLhtml5html5jQueryjQueryletpost-format-galleryTemplatethis默认参数
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程