Chart.js（图表绘制工具库）――HTML5
导读：收集整理的这篇文章主要介绍了html5教程-Chart.js（图表绘制工具库）――HTML5，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 ht...
收集整理的这篇文章主要介绍了html5教程-Chart.js（图表绘制工具库）――HTML5，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 htML部分：
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"canvas/span>
javascript部分：
引入Chart.js文件;
创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化);
实例化Chart对象后就继续创建具体类型的图表了;
曲线图（Line chart）：
html:
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"canvas/span>
javascript：(引入及两种使用方式)
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"script/span>
- 1
//方式一： 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] }
] }
;
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"script/span>
- 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: "", // 字体 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*/ }
html部分：
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"canvas/span>
javascript部分：
引入Chart.js文件;
创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化);
实例化Chart对象后就继续创建具体类型的图表了;
曲线图（Line chart）：
html:
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"canvas/span>
javascript：(引入及两种使用方式)
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"script/span>
- 1
//方式一： 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] }
] }
;
class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);
"script/span>
- 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: "", // 字体 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*/ }
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Chart.js（图表绘制工具库）――HTML5
本文地址： https://pptw.com/jishu/587067.html