利用canvas+Chart.js实现动态折线图

有用highcharts做动态折线图的源代码，但是看了太麻烦，也不好diy。因此决定在原有的canvas+charts.js的基础上做动态折线图。

第一步当然加载记得加载所需要的Chart.js

第二步是用js创建出canvas对象，

this.canvas = document.createElement('canvas');	

this.ctx = this.canvas.getContext("2d");

第三步，用Chart函数绘制折线图

new Chart(this.ctx).Line(this.data, this.option);	

到这一步，已经有了静态的折线图出来了。实现动态的折线图我认为就是在更新数据的情况下利用js的时钟函数定时重绘。

考虑到chart有一个60帧的渐进展现，我们动态的折线不能有这么多的帧，需要及时到位，因此，需要修改Chart.js 的源码：

	Chart.defaults = {
		global: {
			// Boolean - Whether to animate the chart
			animation: true,

			// Number - Number of animation steps
			animationSteps: 1,//本来是60

这样之后，只需要调用时钟定时重绘，并相应的更新数据，就可以实现动态的折线图了

window.setInterval(function(){ 
	new Chart(this.ctx).Line(this.data, this.option);	
},1000); //1秒钟更新一次

上面的代码都只是我认为的一些关键代码，具体的实现过程还需要自己去实现探索，享受这探索的乐趣吧。