Flot javascript graphing：setData for multiple series

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的數據參數都以相同的方式格式化數據。

因此，創建一個可重用的功能：

 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();

這是一個jsFiddle演示 。