网页中避免不了一些图表，那么小白今天带大学了解一下画图表的js-Chart.js库

基本内容

专门用于绘制各种图表(使用HTML5的canvas)、官网 - ，提供如下的6种图表：

1.饼状图

2.柱状图

3.曲线图

4.环形图

5.雷达图

6.极地区域图

自己研究使用JS库通过： 官方提供的帮助文档、官方提供的Demo示例

Chart.js库的使用

使用步骤：

1.HTML页面部分： 引入Chart.js库文件、 定义<canvas>元素

2JavaScript部分：创建画布对象

通过画布对象,创建Chart对象

设置图表的相关数据

调用Chart.js库提供的API方法

第一类型：饼状图

data结构

[

{

value : 饼状图的值

color : 饼状图的颜色

highlight : 饼状图的鼠标悬停颜色

label : 饼状图的文字提示

}

]

相关方法 - Pie(data,options)

第二类型： 柱状图

data结构

{

labels : [柱状图的x轴的提示内容],

datasets : [

{

label : 柱状图的提示内容

fillColor : 填充颜色

strokeColor : 描边颜色

highlightFill : 鼠标悬停填充颜色

highlightStroke : 鼠标悬停描边颜色

data : [柱状图的数据]

}

]

}

相关方法 - Bar(data,options)

第三类型： 曲线图

data结构

相关方法 - Line(data,options)

第四类型：环形图

data结构

相关方法 - Doughnut(data,options)

第五类型： 雷达图

data结构

相关方法 - Radar(data,options)

第六类型：极地区域图

data结构

相关方法 - PolarArea(data,options)

选项options

通过图表绘制的方法的选项，作用范围 - 当前Chart图表起作用

对Chart对象的全局选项， 作用范围 - 所有Chart图表都起作用

Chart.defaults.global.选项名称 = 值；