如何使用Google折线图绘制实时数据并追加新数据而非重绘图表？

你的代码目前每次获取新数据都会重新创建DataTable和LineChart实例，然后全量绘制所有数据，这不仅效率低，还可能导致图表闪烁。我们可以通过复用已有的图表和数据实例，只添加新数据来实现增量更新，具体改动如下：

关键改动点 #

• 将chart、data实例变量提升到全局（或Angular的$scope中），避免每次重新创建
• 初始化阶段只执行一次图表和数据结构的创建
• 每次获取新数据时，仅向现有DataTable添加新行，再触发图表更新

修改后的完整代码 #

// 全局/scope级别保存图表和数据实例
var chart;
var dataTable;
var chartOptions = {
  hAxis: { title: 'Timestamp' },
  vAxis: { title: 'something' },
  tooltip: { isHtml: true },
  legend: { position: 'none' }
};

// 初始化Google Charts并创建基础结构
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(initChart);

function initChart() {
  // 创建DataTable并添加列
  dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Timestamp');
  dataTable.addColumn('number', 'value');
  
  // 创建图表实例
  chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  
  // 启动定时数据请求
  $interval(dataCall, 1000);
}

function dataCall() {
  // 修正$http.get写法：第一个参数是请求URL，参数通过params传递
  $http.get('/your-api-endpoint', {params: {x: "XYZ"}})
    .then(successCallback)
    .catch(failureCallback);
  
  function successCallback(response) {
    $scope.res = response.data; // 确保取到响应的data部分
    // 只添加新的一行数据到现有DataTable
    dataTable.addRow([new Date(), $scope.res.a]); // 可根据需求替换为b字段或其他值
    // 更新图表，复用已有实例和配置
    chart.draw(dataTable, chartOptions);
  }
  
  function failureCallback(response) {
    console.log('数据获取失败:', response);
  }
}

额外说明 #

1. $http.get写法修正：原代码中$http.get({x: "XYZ"}, ...)不符合Angular的API规范，我已经调整为正确的URL+params参数格式。
2. 数据字段选择：你的响应格式是{"a":1, "b":2}，代码里默认使用a字段作为折线图数值，你可以根据实际需求改成b或者其他字段。
3. 初始化时机：把$interval放在google.charts.setOnLoadCallback的回调里，确保图表库完全加载后再启动数据请求，避免初始化阶段出现错误。

这样修改后，每次获取新数据只会向图表添加一条新数据点，而不会重新创建整个图表，运行效率和视觉体验都会流畅很多！

内容的提问来源于stack exchange，提问作者swamykumar