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的数据参数都采用数据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

Flot javascript graphing：setData for multiple series

1 个答案: