chart.js学习

第一步：引入chart.js文件。此工具库在全局命名空间中定义了chart变量。

chart.js文件下载Release Version 2.4.0 · chartjs/Chart.js · GitHub

---

第二步：创建图表实现chart对象，首先传入一个绘图表2d context。我们用H5中的cavcas标签实现

---

第三步：创建图表

//首先通过ID获取标签对象，并告诉他绘制的是二维图像

var chart = document.getElementById('chart').getContext('2d');

//创建Chart对象，传入参数

var  ctx=new  Chart(ctx,{data,options});

//这里的data和options直接传入

其中data数据结构：

labels表示X轴的参数

xLabels表示类别轴，自定义X轴参数

yLabels表示类别轴，自定义Y轴参数

datasets数据集中：[

                            backgroundColor：填充色,

                             borderColor：曲线边框色,

                             piontColor：数据点的颜色,

                             pointStrokeColor：数据点边框色,

                              data：数据

]

控制选项options:

title:{                         //图表标题

              display:true,                //是否显示

               position:'left',            //标题位置

                 text:'',                    //标题名

                 fontColor:'' ,                //标题颜色

                 fontFamily:'',                //标题字体格式

                 fontSize:10                  //字体大小

},

elements: {               //元素配置

                arc:{                  //弧线配置

                 backgroundColor:'',

                 borderColor:'',

                 borderwidth:

                  },

                   line:{

                   tension:0-1,                //线的张力

                   borderColor:'',

                    stepped:true                //承阶梯显示

                   },

                   point:{

                    radius:3                    //点的半径

                     },

                   rectangle:{

                                     backgroundColor:'',

                                     borderWidth:,

                                     borderColor:'',

                                      borderSkipped:'bottom'      //隐藏哪个边

                                      }

},

legend:{                         //图例

                        display:true,

                         position:'left',

                           labels:{                      //图例文字控制

                          fontColor:'' ,

                          fontSize:10

                                         }

},

scales:{                            //坐标轴

                         xAxes:[{                        //X轴信息

                                                display:true,                //是否显示

                                                 position:'top',              //轴的位置

                                                  ticks:{                      //轴文字控制

                                                  beginAtZero:true,          //是否从零开始

                                                  fontSize:15,

                                                  min:0,                      //从最小值开始

                                                  max:100                    //到最大值结束

                                                            },

                                         }],

                                yAxes:[{

                                  //同上

                                   }]

}，

animation:{                              //动画配置

                              duration:1000                        //动画播放时间

}

以上页面代码：

---

---

有啥发现记得留言告诉我哦！^_^