從右側開始繪製圖形

Question

我正在繪製帶有flot圖形的實時圖形。

$(function() { 

    var data = []; 
    var dataset; 
    var totalPoints = 100; 
    var updateInterval = 1000; 
    var now = new Date().getTime();  

    function GetData() { 

     if (data.length > totalPoints) { 
      data.shift(); 
     }  

     var y = Math.random() * 100; 
     var temp = [now += updateInterval, y]; 

     data.push(temp);  
    } 

    var options = { 
     series: { 
      lines: { 
       show: true, 
       lineWidth: 1.2, 
       fill: true 
      } 
     }, 
     xaxis: { 
      mode: "time", 
      tickSize: [2, "second"], 
      tickFormatter: function (v, axis) { 
       var date = new Date(v); 

       if (date.getSeconds() % 20 == 0) { 
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); 
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); 
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); 

        return hours + ":" + minutes + ":" + seconds; 
       } else { 
        return ""; 
       } 
      }, 
      axisLabel: "Time", 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial', 
      axisLabelPadding: 10 
     }, 
     yaxis: { 
      min: 0, 
      max: 100, 
      tickSize: 5, 
      tickFormatter: function (v, axis) { 
       if (v % 10 == 0) { 
        return v + "%"; 
       } else { 
        return ""; 
       } 
      }, 
      axisLabel: "CPU loading", 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial', 
      axisLabelPadding: 6 
     }, 
     legend: { 
      labelBoxBorderColor: "#fff" 
     }, 
     grid: { 
      backgroundColor: "#000000", 
      tickColor: "#008040" 
     } 
    }; 

    $(document).ready(function() { 
     GetData(); 

     dataset = [{ 
      label: "CPU", 
      data: data, 
      color: "#00FF00" 
     }]; 

     $.plot($("#placeholder"), dataset, options); 

     function update() { 
      GetData();  
      $.plot($("#placeholder"), dataset, options) 
      setTimeout(update, updateInterval); 
     } 

     update(); 
    });  
}); 

我每間隔更新圖形。問題是圖總是從左側開始繪製。我希望圖形從右側開始繪製，並在每個時間間隔更新時繼續向左移動。

我試着將數據作爲[null, null]傳遞，但它在控制檯上拋出異常。

這裏有更好的點子嗎？

Fiddle

Answer 1

在呼叫你的時間值過高（1000000毫秒=千秒=〜17分鐘）：

setTimeout(update, 1000000); 

此外，如果你想開始一個全寬圖（以便數據將從右側進入），請在初始變量聲明之後添加以在測量開始前用空點填充圖表：

for (var i = 0; i < totalPoints; i++) { 
    data.push([now - (totalPoints - i) * updateInterval, null]); 
} 

同時，我們也節省啓動時間和僅開始時間，我們有數據後得出的時間標籤：

tickFormatter: function (v, axis) { 
    var date = new Date(v); 
    if (date.getTime() < startDate) { 
     return ""; 
    } else ... 

看到這個更新fiddle，其中包括所有的變化。