ht ML 部分：
canvas id = "myChart" width = "400" h ei ght = "400" > canvas >
javascript部分：
引入Chart.js文件;
创建图表：实例化Chart对象(获取 DOM 节点取得2d context环境后实例化);
实例化Chart对象后就继续创建具体类型的图表了;
曲线图（Line chart）：
html:
canvas id = "myChart" width = "600" height = "400" > canvas >
javascript：(引入及两种使用方式)
script src = "js/Chart.min.js" > script > 1
script ty PE = "text/javascript" > //方式一： VAR ctx = document.getElementById( "myChart" ).getContext( "2d" );; var MyNewChart = new Chart(ctx).Line(data); //这种方式是只 加载数据 集，（缺省options）不修改默认参数（简称法一） //数据结构（数据参数设置） var data = { //折线图需要为每个数据点设置一标签。这是显示在X轴上。 labels: [ "January" , "Fe br uary" , "M Arch " , "A PR il" , "May" , "June" , "July" ], //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态 改变 的） datasets: [{ fillColor: "rgba(220,220,220,0.5)" , //背景填充色 stroke Color: "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 > 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 数据结构：
//数据结构（数据参数设置） 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 ] }] }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 图标参数：
Line. defaults = { //网格线 是否 在数据线的上面 scaleOverlay : false , //是否用硬编码重写y轴网格线 scale override : false , //** Requi red 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: " " , // 字体 scaleFontF ami ly: "'Arial'" , // 文字大小 scaleFont Size: 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" , // 动画完成时的执行函数 /*onAnimation complete : null*/ } html部分：
canvas id = "myChart" width = "400" height = "400" > canvas >
javascript部分：
引入Chart.js文件;
创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化);
实例化Chart对象后就继续创建具体类型的图表了;
曲线图（Line chart）：
html:
canvas id = "myChart" width = "600" height = "400" > canvas >
javascript：(引入及两种使用方式)
script src = "js/Chart.min.js" > script > 1
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 > 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 数据结构：
//数据结构（数据参数设置） 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 ] }] }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 图标参数：
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: " " , // 字体 scaleFontF am ily: "'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*/ } 觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-Chart.js（图表绘制工具库）――HTML5 全部内容，希望文章能够帮你解决 html5教程-Chart.js（图表绘制工具库）――HTML5 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-Chart.js（图表绘制工具库）――HTML5的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219223