JQuery Flot：如何將數據添加到現有的點圖而不是重繪

Question

我正在繪制一個點圖，圖表應該每5秒更新一次新數據。 這里的最小和最大范圍始終是固定的

目前，當我從服務器獲取新數據時，我會將新數據合並到現有的source.data並繪制完整的圖形。

所以，我不想一次又一次地重繪完整的數據。 隨着source.data的長度不斷增加，性能也在下降。 因此，我可以僅將新數據添加到現有圖表，而不是重繪完整數據

請在此處找到源代碼

var source = [
    { 
        data: [], 
        show: true, 
        label: "Constellation", 
        name: "Constellation",
        color: "#0000FF",
        points: { 
            show: true,
            radius: 2, 
            fillColor: '#0000FF'
        }, 
        lines: {
            show: false 
        }
    }
]

var options = {...}

$.getJSON(URL , function(data) {
   ...
   $.merge(source[0].data, new_data);
   plotObj = $.plot("#placeholder", source, options);
}

Answer 1

請遵循以下步驟：

plotObj.setData(newData);
plotObj.setupGrid();  //if you also need to update axis.
plotObj.draw();       //to redraw data

另一個有用的方法是getData（）。 使用此方法，您可以獲取當前數據。

var data = plotObj.getData();

Answer 2

你應該避免$.plot遍地調用$.plot方法。 它曾用於泄漏內存（不確定它是否仍然存在）。

也就是說，@ Luis很接近，但讓我們把它們放在一起。 要將數據添加到現有繪圖，請執行以下操作：

 var allData = plotObj.getData(); // allData is an array of series objects
 allData[seriesIndex].data.push([newXPoint,newYPoint]);
 plotObj.setData(allData);
 plotObj.setupGrid();  // if axis have changed
 plotObj.draw();

應該注意的是，這確實重繪了整個情節。 這對於HTML5 canvas來說是不可避免的 。 但是，現在的飛行速度非常快，你幾乎沒有注意到它。