FLOT只绘制一个值或不绘制整个图形

时间:2013-12-06 20:35:04

标签: javascript jquery 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;
}

其中getOutsideData返回:[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]。由于图是条形图,它只显示一个条形图。我可以调试这些函数,甚至mMainPlot绘图数据都包含来自服务器的更新值,并随每次更新而变化。

1 个答案:

答案 0 :(得分:1)

事实证明,每次更新网格时都不需要调用setupGrid()。只要图表数据是唯一变化的变量,只需调用draw()就足够了。正如对问题的评论中所述,只要数据更新/更改,就应该调用setupGrid()

就我而言,数据是唯一改变的,但问题来自于情节的初始化。

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

这构建了我的情节,但getRandomData()只返回了一个数据点。因此,该图仅继续显示单个数据点。我更新了函数以返回当真实数据开始流式传输并且有效时我希望得到的13个点。

道德:如果您想更新图表,请务必正确初始化图表,以便开始使用正确数量的数据点。如果这些更改,请再次致电setupGrid()以清理错位的图表。