我将他分为两类,静态图表和动态图表。静态图表指图表创立的时候数据为常数。动态图表指数据为变量。运用chart.js时,首先要它需要你在网页中创建一个canvas标签来承载生成的图表(条形图,线形图,扇形图等等)。
静态图表比较简单,只需要将datasets中间的data填满想要显示的数据即可。如果想要显示不止一条线,可以加入多组dataset。
动态图表则不能直接罗列数据,因为数据的个数和值不再是常量。这时候可以选择用AJAX将数据从controller传到view。下图的callback function 指的是当你从对应的url收到数据时会调用的函数。例子如下:架设我现在想要显示一个横轴为自己定义的时间,纵轴为值的折线图,通过ajax收到的数据data是一个数组。
用数组DatasetsArray来存储数据的值,颜色,label等各种性质。在循环中遍历数组number,讲值赋予DatasetsArray的data项,并同时可以定义当前dataset的其他性质,包括label,bordercolor,是否填充颜色等等。
给dataset赋值结束后,便可以开始画图了,如下图直接将DatasetsArray赋值给datasets量即可。
在dataset后还可以加上许多其他的参数,定义图表的各个属性,如x坐标轴的字体大小,legend的名字等。
加上onclick function也是一种很实际的做法,可以让你的图表包含更多信息量且高端。比如说,你想点中图表的某个数据点然后跳转到某个页面,相当于这个点被active,则可以使用以上方法。
总之,chart.js是一个很实用易上手看起来高端的数据visulization方法。
myLineChart.destroy()能解决一部分问题,更完美的解决方法我还在研究中,同求大神指点
更好的解决方法如下:
每次绘图之前先删除canvas节点,重新添加一个。
$('#lineChart').remove()// this is my <canvas>element
$('#lineChartParent').append('<canvas id="lineChart" height="230"></canvas>')
var myChart = new Chart(ctx).Pie(data, options)var legend = myChart.generateLegend()
legend 里就是模板生成的HTML代码,可以设置为某个元素的innerHTML然后就显示出来了