Vue.js FlotChart setupGrid（）不'；t更新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轴的最大范围，它可以正常工作。：）

特别感谢这个JSFIDLE：