Flot javascript graphing:多个系列的setData

Question

我试图一次绘制6个时间序列，并每隔几毫秒更新它们的值。

下面是我最初绘制数据的方式，它工作得很好：

var d1 = [];
var d2 = [];
var d3 = [];
var d4 = [];
var d5 = [];
var d6 = [];

d1 = getRandomData(d1, totalPoints);
d2 = getRandomData(d2, totalPoints);
d3 = getRandomData(d3, totalPoints);
d4 = getRandomData(d4, totalPoints);
d5 = getRandomData(d5, totalPoints);
d6 = getRandomData(d6, totalPoints);

var plot = $.plot("#placeholder", [{
data: d1,
lines: { show: true, fill: false }
}, {
data: d2,
lines: { show: true, fill: false }
}, {
data: d3,
lines: { show: true, fill: false }
}, {
data: d4,
lines: { show: true, fill: false }
}, {
data: d5,
lines: { show: true, fill: false }
}, {
data: d6,
lines: { show: true, fill: false }
}]);

但我的更新函数不起作用：

function update() {

d1 = getRandomData(d1, totalPoints);
d2 = getRandomData(d2, totalPoints);
d3 = getRandomData(d3, totalPoints);
d4 = getRandomData(d4, totalPoints);
d5 = getRandomData(d5, totalPoints);
d6 = getRandomData(d6, totalPoints);

plot.setData([d1, d2, d3, d4, d5, d6]);

// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);

}
//update();

当我取消注释并调用update()时，图形变为空白。但我知道数据最初加载得很好，没有调用它。

我如何更新我的d数组并正确地重新绘制图形？谢谢。

Answer 1

setData和plot的data参数都接受数据formatted the same way。

因此，创建一个可重用的函数：

 getSeriesObj = function() {
   return [
    {
      data: getRandomData(d1, totalPoints),
      lines: { show: true, fill: false }
    }, {
      data: getRandomData(d2, totalPoints),
      lines: { show: true, fill: false }
    }, {
      data: getRandomData(d3, totalPoints),
      lines: { show: true, fill: false }
    }, {
      data: getRandomData(d4, totalPoints),
      lines: { show: true, fill: false }
    }, {
      data: getRandomData(d5, totalPoints),
      lines: { show: true, fill: false }
    }, {
      data: getRandomData(d6, totalPoints),
      lines: { show: true, fill: false }
    }
  ];
}

对于初始图：

var plot = $.plot("#placeholder", getSeriesObj());

要重置数据，请执行以下操作：

plot.setData(getSeriesObj());
plot.draw();

Here's a jsFiddle demo。