FlotChart setupGrid不会更新X轴

问题描述

我正在处理实时图表，并且正在将新数据推送到数组，但是即使调用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);
} 

我不确定我在做什么错

解决方法

自己解决。看来setupGrid()不会计算数据集并不会自动更新轴。您需要自己更新x轴范围。因此，要解决此问题，我要做的是：

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轴的最大范围，并且可以正常工作。 ：）

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