使用C3.js实时数据可视化

I am new to javascript and want to use C3.js for streaming time series data visualization. I want to display the 5 most recent data points on the chart. The new data point is streamed every 2 seconds. So, the display should discard the oldest data point and refresh the graph with this additional data point.

我是javascript新手，想要使用C3。用于串流时间序列数据可视化。我想在图表上显示最近的5个数据点。新数据点每2秒流一次。因此，显示应该丢弃最古老的数据点，并使用这个附加的数据点刷新图表。

Example: x axis has time in seconds:

例:x轴的时间单位为秒:

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

The new data point (arriving after 2 seconds) would be x = 10, y = 16
So, I want to update the xData and yData arrays as,

新的数据点(2秒后到达)将是x = 10, y = 16，因此，我想将xData和yData数组更新为，

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

I looked at the 'flow' API example of C3.js. But it appears like a new array is created everytime.

我查看了C3.js的“flow”API示例。但它似乎每次都创建一个新的数组。

Could someone please illustrate how to accomplish this in c3? I am using node.js.

谁能举例说明如何在c3中实现这一点吗?我使用node . js。

2 个解决方案

#1

Well, if you don't care about prior data points you could simply do this:

如果你不关心之前的数据点你可以这么做

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
}

Also if you want to keep a record of past data points you can always record the shifted off number by doing something like historicalXpointArray.push(xData.shift());

另外，如果您想要记录过去的数据点，您可以通过执行类似historicalXpointArray.push(xData.shift())的操作来记录移位的off号;

#2

Initialize your initial chart with the data you want. Let's say:

用所需的数据初始化初始图表。比方说:

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

Add data, restrict to last 5 elements, and reflow the chart:

添加数据，限制到最后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

#1