使用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.定位畫圖位置

<div id="panel" style="margin:50px">
    <!--<canvas id="bit" height="250" width="600"></canvas>-->
    <!--為防止瀏覽器報錯，id不要用canvas等-->
</div>

注意：為了防止停止定時器時，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）此方法還有很多不夠完善的地方，例如無法限定縱座標的值的範圍，由庫自行調整等，希望程式設計師朋友們指出錯誤和修改完善方法。