javascript - 更新 float 据和轴

Question

我创建了一个高度交互的图表。所有交互都已实现，无需重新启动 flot 对象。重新启动 flot 对象会导致交互中断，我希望尽可能高效地完成此操作。

我的图表支持的交互是:

• 改变单个系列的可见性
• 多个 y 轴并在它们之间切换
• 缩放图表(带重置)
• 单击并拖动平移

我必须添加的最后两个功能是:

• 添加/删除单个系列
• 更新单个系列

两者都需要ajax请求，图表必须支持1000个数据点，因此效率是关键(我必须在某个时候减少数据点)。

正如我所提到的，到目前为止我已经成功地完成了所有这些工作，而无需多次调用 $.plot，我已经使用了插件内置函数并从 getOptions() 方法设置了一些选项。我不使用 $.plot 而是调用plot.draw() 方法来更新图表。但是，我正在努力寻找将数据推送到所提供的方法中，而无需再次调用整个函数(此外，这样做会使跟踪我在选项中更改的变量变得更加困难。)

我的问题是，有没有人有使用 ajax 请求更新(而不是替换) float 轴和数据的经验，以及您如何能够获得有效的结果？

Answer 1

您缺少的方法是 setupGrid 。这将重新创建轴而无需重新初始化绘图。

一般来说，我修改现有绘图的工作流程是这样的:

var series = plot.getData(); // reference to your series
series[0].data = someNewArray;
series[0].color = 'blue'; // modify existing series
series.push({data: [[0, 5], [1, 1], [2, 7]], color: 'green'}); // add a new one
plot.setData(series); // you need to set the data so that flot will re-process any newly added series
var opts = plot.getOptions() // get a reference to the options
opts.xaxes[0].min = -1; // adjust an axis min, use the xaxes property NOT the xaxis
// there is no need to "setOptions"...
plot.setupGrid() // if you need to redraw the axis/grid
plot.draw()