[英]Real-time scrolling Google LineChart
從這個問題開始,我正在嘗試實現滾動的Google LineChart。 該圖表顯示了價值10秒的數據(計算為10 *每次數據更新的時間),並在初始化時為DataTable填充了零值,以填充所需的價值10秒的數據。
該圖以20Hz(50ms周期)連續運行,從而刪除了第一個可見數據點並追加了新數據點,從而數據點的總數(data.getNumberOfRows())是恆定的。 我即將實現此功能,但是正如下面的小提琴所示,我忽略了一些事情。 繪制新點並將其連接到較早的點,而不是第二個最終點,並且可見數據點的數量隨時間增長。
google.load('visualization', '1.0', {
'packages': ['corechart']
});
google.setOnLoadCallback(loadChart);
function loadChart() {
var options = {
width: 1000,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100
},
curveType: 'none',
pointSize: 5,
series: {
0: {
color: 'Blue'
}
}
};
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Data');
data.addRows([
[0, 0]
]);
var interval = 50;
var dataSize = data.getNumberOfRows();
var plotSize = (10 * ((1/interval) * 1000));
if (dataSize < plotSize) {
for (i = 0; i < (plotSize - dataSize); i++ ) {
data.addRows([[i, 0]]);
}
}
var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
setInterval(drawChart, interval);
function drawChart() {
for (i = 1; i < data.getNumberOfRows() - 1; i++) {
data.setValue(i-1, 1, data.getValue(i, 1));
}
data.insertRows(data.getNumberOfRows()-1, [[data.getNumberOfRows()-1, Math.floor(Math.random() * 100) + 1 ]]);
chart.draw(data, options);
}
}
我意識到我應該按照下面的代碼按需工作,每次迭代重置X值。
google.load('visualization', '1.0', {
'packages': ['corechart']
});
google.setOnLoadCallback(loadChart);
function loadChart() {
var options = {
width: 1000,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100
},
curveType: 'none',
pointSize: 5,
series: {
0: {
color: 'Blue'
}
}
};
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Data');
data.addRows([
[0, 0]
]);
var interval = 50;
var dataSize = data.getNumberOfRows();
var plotSize = (10 * ((1/interval) * 1000));
if (dataSize < plotSize) {
for (i = 0; i < (plotSize - dataSize); i++ ) {
data.addRows([[i, 0]]);
}
}
var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
setInterval(drawChart, interval);
function drawChart() {
data.removeRow(0);
for (i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 0, i);
}
data.insertRows(data.getNumberOfRows(), [[data.getNumberOfRows()-1, Math.floor(Math.random() * 100) + 1 ]]);
chart.draw(data, options);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.