使用chart.js制作动态折线图

为了能给用户带来更好的使用体验，公司产品的传输状态能够让客户清晰的看到，从而实时观察设备和网络的情况，

为了保证引入库的统一性，用原本的chart.js的库来做动态的折线图：

1.定义初始变量

var myLine="";
var maxLength=30;
var index_bit = new Array(30);
var data = [0];
for (var i = 0; i < 30; i++) {
    index_bit[i] = i
}
var time="";

myLine是画图的实例，maxLength是当前显示横坐标最大数值，data是数据的初始值

2.定位画图位置

id="panel" style="margin:50px">
    
    

注意：为了防止停止定时器时，canvas会保留原来画图的数据，从而出现比较鬼畜的闪图现象，canvas最好是动态加载标签，

3.定时获取数据画图

    function paintLineChart(){
                var currentData=Math.random()*100+1;
                if(data.length>=30){
                    myLine.removeData();
                    myLine.addData([currentData],maxLength++)
                }else{
                    data.push(currentData);
                    var lineChartData = {
//                            横坐标
                        labels :index_bit,
                        datasets : [
                            {
                                fillColor : "rgba(220,220,220,0.5)",
                                strokeColor : "palevioletred",
                                pointColor : "palevioletred",
                                pointStrokeColor : "fff",
                                data :data
                            }
                        ]
                    };
                    var defaults={
                        animation : false
                    };
                    myLine = new Chart(document.getElementById("bit").getContext("2d")).Line(lineChartData,defaults);
                }
                time=setTimeout(function () {
                    paintLineChart()
                },1000);
            }

如果是ajax从后台获取数据的话，可以让currentData等于返回值的某一个字段，用timeOut而不用Interval是为了防止与交互时

数据不能马上返回或者返回时间太长，多条ajax命令并发会导致后台命令阻塞。

4.清除数据

clearTimeout(time);
myLine="";
maxLength=30;
index_bit = new Array(30);
data = [0];
for (var j = 0; j < 30; j++) {
    index_bit[j] = j
}
$("#panel").empty();

清除canvas标签，就可以清除掉保留在canvas上的数据，避免出现再次画图时会出现上次画图的曲线的闪图现象。

最终效果图如下：

5.提示

1）上面方法只是单一直线图，多条折线图可以参考chart.js的中文文档。

2）换图的库很多，例如highchart.echart等都可以用，我只是利用现有库进行制作。

3）横坐标最大值是在当前显示的最大格数，并不是实际的值，当达到最大值时，横坐标会动态替换，就想上面图显示的样子。

4）此方法还有很多不够完善的地方，例如无法限定纵坐标的值的范围，由库自行调整等，希望程序员朋友们指出错误和修改完善方法。