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]

我查看了＆＃39;流程＆＃39; C3.js的API example但似乎每次都会创建一个新数组。

有人可以说明如何在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进行实时数据可视化

2 个答案: