實時數據可視化與C3.js

我是JavaScript的新手，並希望使用C3.js流式時間序列數據可視化。我想在圖表上顯示最近的5個數據點。新的數據點每2秒傳輸一次。因此，顯示器應丟棄最舊的數據點並使用此附加數據點刷新圖形。實時數據可視化與C3.js

實施例： 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'API example。但它看起來像是每次都創建一個新的數組。

有人請說明如何在c3中完成此操作嗎？我正在使用node.js.

來源

2015-11-04 memC

我寫了一個小腳本，可以滿足您的需求。這裏是[鏈接]（https://gist.github.com/nikhil38/5b1df27f25f421a1048f87fa14af2fed） – Nikhil

好吧，如果你不計較以前的數據點，你可以簡單地這樣做：

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（））的記錄移出的數量;

來源

2015-11-04 20:00:49 Pete

用你想要的數據初始化你的初始圖表。比方說：

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

來源

2015-11-04 19:20:52 FrankerZ

謝謝這很有用！ – memC

實時數據可視化與C3.js

回答

相關問題