FLOT只绘制一个值，或者没有绘制整个图形

FLOT is only charting one value or is not drawing the whole graph

本文关键字：绘制 或者 图形 一个 FLOT      更新时间：2024-04-22

我的Flot图表没有显示我的所有点。图表似乎只显示了其中一个值，在这种情况下只有一个条形图（这里没有电话公司开玩笑）。这里是初始化器：

var mMainPlot= $.plot("#mainPlot", [{ data: getRandomData(), color: "rgba(20,60,200,0.9)" }], {
    bars: { show: true, barWidth: 0.8, fill: true, fillColor: "rgba(20,60,200,0.5)" },
    series: {
        color: "rgba(0,0,60,1)",
        lineWidth: 0,
        shadowSize: 4   //Faster w/o shadows
    },
    yaxis: {
        min: 20,
        tickSize: 20,
        tickFormatter: function (point) {
            return (point % 40 === 0) ? "" : point.toString();
        },
        max: 140
    },
    xaxis: {
        show: false
    },
    crosshair: {
        mode: "x", lineWidth: 12
    },
    grid: {
        hoverable: true, autoHighlight: false
    }
});

在定期更新时，我从服务器上查询数据：

function update() {
    mMainPlot.setData([getOutsideData(LiveData)]);
    mMainPlot.draw();
}
function getOutsideData(values) {
    var largestVal = 0;
    var res = [];
    var i = 0;
    for (i = 0; i < values.length; i++) {
        res.push([i, values[i]]);
        if (values[i] > largestVal)
            largestVal = values[i];
    }
    return res;
}

其中CCD_ 1返回：CCD_。由于该图是条形图，因此它只显示一个条形图。我可以调试函数，甚至mMainPlot绘图数据都保存来自服务器的更新值，并随着每次更新而更改。

事实证明，不需要每次对网格进行更新时都调用setupGrid()。只要图形数据是唯一变化的变量，简单地调用draw()就足够了。正如对该问题的评论中所述，无论何时更新/更改数据以外的内容，都应调用setupGrid()。

在我的案例中，数据是唯一发生变化的东西，但问题来自于图的初始化。

var mMainPlot= $.plot("#mainPlot", [{ data: getRandomData(), color: "rgba(20,60,200,0.9)" }], {

这建立了我的绘图，但getRandomData()只返回了一个数据点。因此，该图仅继续显示单个数据点。我更新了函数，以返回我希望在实际数据开始流式传输时得到的13个点，并且它起作用了。

寓意：如果你想更新图表，一定要正确初始化你的图表，这样它一开始就会有正确数量的数据点。如果这些更改，则再次调用setupGrid()来清理未对齐的图表。

相关文章：