我正在尝试使用 Google 图表中的折线图创建滚动动画。我想显示来自外部数据源的实时数据,因此我的数据表无法提前填充,也不能是特定的大小。
我的总体想法是使用滚动窗口(请参阅此处的最后一个示例: https://developers.google.com/chart/interactive/docs/animation#Examples ),然后向前移动窗口,同时删除窗口后面的数据并在窗口前面添加数据。
到目前为止,我的进度如下:http://jsfiddle.net/svantetobias/knt7F/
HTML:
<div id="google_chart_div" width="750" height="400"></div>
<input id="next" type="button" value="Next reading">
JavaScript:
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(loadChart);
function loadChart() {
// Set chart options
var options = {
width: 1000,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100
},
hAxis: {
viewWindow: {
min: 1,
max: 5
}
},
curveType: 'none', // or 'function'
pointSize: 5,
series: {
0: {
color: 'Blue'
},
1: {
color: 'Orange'
}
},
animation: {
duration: 1000,
easing: 'linear'
}
};
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Time', 'series1', 'series2'],
['2014 23/07 13:00', 700, 900],
['2014 23/07 14:00', 850, 900],
['2014 23/07 15:00', 1000, 900],
['2014 23/07 16:00', 1050, 900],
['2014 23/07 17:00', 700, 900],
['2014 23/07 18:00', 650, 900],
['2014 23/07 19:00', 700, 900],
['2014 23/07 20:00', 950, 900]
]);
// Instantiate our chart
var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
// Define button
var button = document.getElementById('next');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready', function () {
button.disabled = false;
});
// Draw chart
chart.draw(data, options);
}
button.onclick = function () {
//data.removeRow(0);
data.insertRows(data.getNumberOfRows(), [
['2014 23/07 20:00', Math.floor((Math.random() * (1400 - 600)) + 600), 900]
]);
options.hAxis.viewWindow.min += 1;
options.hAxis.viewWindow.max += 1;
drawChart();
};
drawChart();
}
对于前几个动画,看起来我想要它,但随后线条开始产生奇怪的波浪。如何使其像滚动窗口一样正确地呈现动画?
最佳答案
您的问题是您一遍又一遍地添加相同的日期,这导致图表很难插入结果。试试http://jsfiddle.net/KaU3y/ ,或:
data.insertRows(data.getNumberOfRows(), [
['' + new Date(), Math.floor((Math.random() * (1400 - 600)) + 600), 900]
]);
关于javascript - 使用 Google Charts 滚动 LineChart 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24612313/