html js 扇形统计图_Chart.js 轻量级HTML5图表绘制工具库（知识整理）

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

步骤：

html部分：

javascript部分：

引入Chart.js文件；

创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化)；

实例化Chart对象后就继续创建具体类型的图表了；

曲线图(Line chart)：

html:

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]

}]

};

数据结构：

//数据结构(数据参数设置)

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: "",</