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

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

图表必须

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

建议设置类似于以下内容...

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);
    }
  }
});

一秒钟可能太短，无法获取数据和绘制图表......