如何使用谷歌折线图绘制实时数据

Question

我正在使用每秒一次的$ 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);
					     
		}

Answer 1

必须重新绘制图表以显示新数据，
但您可以避免每次都重新创建图表和选项

建议类似以下设置...

{{1}}

一秒钟的间隔可能太短，无法获取数据并绘制图表......