做数据显示时总需要各种图表,显示的更形象,什么饼状图,柱状图的。常用的就是Chart.js。或者Highchartsjs写的
chartjs可以方便的绘制出各种图形,同时对数据进行切换。chartjs是canvas写的,所以
Highchartsjs则是svg绘制。
以线形图为例

labels 就是横坐标,datasets数据集合,data数组为每一项的,对应每个月的数据,y轴坐标显示根据每一项data计算显示出。
fill是否有填充,曲线下方和x轴之间是否有填充色,
pointBackgroundColor数据点的背景色,
pointHoverBorderColor鼠标覆盖时颜色,手机为点击时的样式,
scales,中参数有
chartjs对数据的切换都是在数组里,对数据的数据datasets更换,然后重新绘制。
同时需要update 才重新绘制
chart.update()
传入datasets里数据格式,同时需要对显示的数据图形赋值,线条颜色之类的。初次进入页面时,图形设置的初始化
初次进入页面绘制 ,gbColor 线条颜色 dataAry就是数据了
每次要显示其他数据重新传入数组就好了
arr[1] x轴坐标,arr[0],要展示的数据的值,里面就是多个数组。
arr[2] 鼠标覆盖上去显示的label 数据,即DataSets里
chartjs 线形图jq封装如下
Highcharts如下
有需要的交流的可以加个好友