Question

我正在尝试创建一个简单的flot line graph并在计时器上更新它，我只想显示最后10个数据点。但我只看到轴而不是图形图。此外，我看到x轴随额外数据而变化，但y轴保持不变，并且与附加数据不对应。我的代码如下：

var dataSet = [];
var PlotData;
var x = 0;
var y = 0;
var plot = null;

function EveryOneSec()
{
    if (dataSet.length == 10)
    {
        dataSet.shift();
    }
    x++;
    y += 2;
    dataSet("[" + x + ", " + y + "]");

    PlotData = { label: "line 1", data: [ dataSet ], color: "green" };

    if (plot == null)
    {
        plot = $.plot($("#placeholder"), [ PlotData ], { lines: {show: true}, points:          {show: true}});
    }
    else
    {
        plot.setData([ PlotData ]);
        plot.setupGrid();
        plot.draw();
    }
    setTimeout(EveryOneSec, 1000);
}

我尝试使用和不调用setupGrid（），但这对轴显示或图形图没有影响。当我得到0到9的刻度时，x轴停止变化，即使x增加超过该值，并且y轴保持静态。我认为上面的代码在传递数据数组方面是正确的，那么为什么图形不会出现呢？

Answer 1

好的，你有两个问题。

首先，您没有正确追加dataSet。我不确定你的语法是什么，但是你需要在数组的每个插槽中使用[x,y]，Array.push可以实现。

此：

dataSet("[" + x + ", " + y + "]");

应该是这样的：

dataSet.push([x , y]);

当你创建系列对象PlotData时，你不需要将数据存储在另一个数组中，所以不要这样：

PlotData = { label: "line 1", data: [ dataSet ], color: "green" };

你需要这个：

PlotData = { label: "line 1", data:  dataSet , color: "green" };

在此处查看：http://jsfiddle.net/ryleyb/qJEXH/

简单的flot图不更新

1 个答案: