我正在使用每秒一次的 $interval 调用来绘制来自服务器的数据的谷歌折线图。现在我想将新数据添加到已经绘制的图表中,而不是再次重新绘制图表......
$interval(dataCall, 1000);
function dataCall() {
$http.get({x: "XYZ"}, successCallback, failureCallback);
function successCallback(response) {
$scope.res = response; //response is like {"a":1, "b":2}
drawBasic();
}
function failureCallback(response) {
console.log(response);
}
}
google.charts.load('current', {packages: ['corechart', 'line']});
var dataArray = [];
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Timestamp');
data.addColumn('number', 'value');
var options = {
hAxis: {
title: 'Timestamp'
},
vAxis: {
title: 'something'
},
tooltip: { isHtml: true },
legend: {
position: 'none'
}
};
dataArray.push([new Date(), $scope.res]);
data.addRows(dataArray);
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
}
最佳答案
必须重新绘制图表才能显示新数据,
但您可以避免每次都重新创建图表和选项
推荐类似于以下的设置...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Timestamp');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
var options = {
hAxis: {
title: 'Timestamp'
},
vAxis: {
title: 'something'
},
tooltip: { isHtml: true },
legend: {
position: 'none'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
dataCall();
$interval(dataCall, 1000);
function dataCall() {
$http.get({x: "XYZ"}, successCallback, failureCallback);
function successCallback(response) {
data.addRow([new Date(), response.a, response.b]);
chart.draw(data, options);
}
function failureCallback(response) {
console.log(response);
}
}
});
一秒的时间间隔可能太短,无法获取数据并绘制图表...
关于charts - 如何使用谷歌折线图绘制实时数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48114150/