C3.js 实时数据可视化

Question

我是 javascript 的新手，想使用 C3.js 进行流式时间序列数据可视化。我想在图表上显示 5 个最近的数据点。新数据点每 2 秒流式传输一次。因此，显示应该丢弃最旧的数据点并使用这个额外的数据点刷新图形。

示例： x 轴的时间以秒为单位：

xData = [ 0, 2, 4, 6, 8] 
yData = [10, 11, 12, 13, 14]

新数据点（2 秒后到达）将是 x = 10, y = 16
所以，我想将 xData 和 yData 数组更新为

xData = [ 2, 4, 6, 8, 10] 
yData = [ 11, 12, 13, 14, 16]

我看了C3.js'flow'APIexample。但似乎每次都会创建一个新数组。

有人可以说明如何在 c3 中完成此操作吗？我正在使用 node.js.

Answer 1

用你想要的数据初始化你的初始图表。比方说：

var data = [
    ['x', 0, 2, 4, 6, 8],
    ['data1', 10, 11, 12, 13, 14],
];

添加数据，限制为最后 5 个元素，并重排图表：

data[0].push(10);
data[1].push(16);

for ( var i=0; i<data.length; i++ ) {
    //Restrict to last 5 elements (Preserves first element)
    data[i] = [data[i][0]].concat(data[i].slice(1).slice(-5));
}

/*
 * Data now looks like this:
[
    ["x", 2, 4, 6, 8, 10],
    ["data1", 11, 12, 13, 14, 16]
]
 *
 */

//Reflow chart with new data

Answer 2

好吧，如果您不关心先前的数据点，您可以简单地这样做：

success: function(data, textStatus, xhr) { 
  xData.shift();
  yData.shift();
  xData.push(data.x);
  yData.push(data.y);
  // now you can recall the chart function to use the new data
}

此外，如果您想记录过去的数据点，您可以随时通过执行 historicalXpointArray.push(xData.shift());

C3.js 实时数据可视化

real time data visualization with C3.js

javascript

node.js

c3.js