|
有用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秒钟更新一次
上面的代码都只是我认为的一些关键代码，具体的实现过程还需要自己去实现探索，享受这探索的乐趣吧。 | 
转播
