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 的方法。它曾经泄漏内存（不确定是否仍然存在）。

也就是说，@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();

需要注意的是，这确实重绘了整个情节。这是不可避免的和HTML5canvas。但是 flot 绘制速度非常快，您几乎不会注意到它。

JQuery Flot : 如何将数据添加到现有的点图而不是重新绘制

JQuery Flot : How to add data to the existing point graph instead of redrawing

javascript

jquery

flot

flotr2