2

我正在绘制一个点图，该图应该每 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);
}
4

2 回答 2

5

请按照以下步骤操作：

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

另一个有用的方法是 getData()。使用此方法，您可以获得当前数据。

var data = plotObj.getData();
于 2015-03-04T16:17:38.230 回答
3

$.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 画布 是不可避免的。但是flot 的绘制速度非常快，您几乎不会注意到它。

于 2015-03-04T20:06:48.357 回答