FlotChart setupGrid() 不更新 X 轴

Question

我正在处理实时图表并将新数据推送到数组，但即使在调用 setupGrid() 和 draw() 之后，图表也不会更新 X 轴数据。

this.plot = $.plot($("#chart"), [this.plotData], this.plotOptions);

在方法上，我是这样做的：

function updateChart() {
    this.plotData.push([this.plotIdx, this.serverinfo.cpu])
    this.plot.setData([this.plotData]);
    this.plot.setupGrid();
    this.plot.draw();
    this.plotIdx++;

    setTimeout(() => this.updateChart(), 10000);
}

我不确定我做错了什么

Answer 1

自己解决了。看起来 setupGrid() 不会自动计算数据集和更新轴。您需要自己更新 x-axis 范围。所以，为了解决这个问题，我所做的是：

function updateChart() {
    this.plotData.push([this.plotIdx, this.serverinfo.cpu])
    this.plot.setData([this.plotData]);

    //Used API to manually update x-axis range and it works
    var axes = this.plot.getAxes();
    axes.xaxis.options.max = this.plotIdx;

    this.plot.setupGrid();
    this.plot.draw();

    this.plotIdx++;

    setTimeout(() => this.updateChart(), 10000);
}

我使用 Flot 的 getAxes() API 获取坐标轴并更新了 x-axis' 的最大范围并且它有效。 :)

特别感谢这个 JSFiddle：https://jsfiddle.net/jfazler/gQaUz/

FlotChart setupGrid() 不更新 X 轴

FlotChart setupGrid() doesn't update X-Axis

vue.js

flot