如何在数据值变化时自动更新angular2-google-charts的geochart图表

• ng2-google-charts默认不会监听dataTable内部的数组元素变更，只有当绑定的[data]对应的整个GoogleChartInterface对象的引用发生变化，或者手动调用重绘方法时，才会触发图表刷新。
• 你直接调用push方法修改states_cases数组，数组的引用没有发生变化，Angular变更检测不会认为输入属性data有更新，因此图表不会重绘。
• 现有逻辑没有清空上一次查询的旧数据，多次切换周次后states_cases会堆积多组数据，导致图表数据异常。
• 原有代码第二列拼接了字符串前缀，会导致数值列变为字符串类型，GeoChart无法识别数值生成色阶，属于数据类型错误。

以下两种方案二选一即可：

方案1：替换对象引用触发自动刷新 #

修改pushCaseData方法，每次更新数据时生成新的数组、重新赋值整个cases对象，触发变更检测即可自动刷新：

pushCaseData(res, week: number) {
  // 先清空旧数据，仅保留表头
  this.states_cases = [['State','COVID-Confirmed Cases: ']];
  // 插入新数据，第二列直接传数字类型的病例数
  this.states_cases.push(
    [res.data.BB.name, Number(res.data.BB.history[week].cases)],
    [res.data.BE.name, Number(res.data.BE.history[week].cases)],
    [res.data.BW.name, Number(res.data.BW.history[week].cases)],
    [res.data.BY.name, Number(res.data.BY.history[week].cases)],
    [res.data.HB.name, Number(res.data.HB.history[week].cases)],
    [res.data.HE.name, Number(res.data.HE.history[week].cases)],
    [res.data.HH.name, Number(res.data.HH.history[week].cases)],
    [res.data.MV.name, Number(res.data.MV.history[week].cases)],
    [res.data.NI.name, Number(res.data.NI.history[week].cases)],
    [res.data.NW.name, Number(res.data.NW.history[week].cases)],
    [res.data.RP.name, Number(res.data.RP.history[week].cases)],
    [res.data.SH.name, Number(res.data.SH.history[week].cases)],
    [res.data.SL.name, Number(res.data.SL.history[week].cases)],
    [res.data.SN.name, Number(res.data.SN.history[week].cases)],
    [res.data.ST.name, Number(res.data.ST.history[week].cases)],
    [res.data.TH.name, Number(res.data.TH.history[week].cases)],
  );
  // 重新赋值整个cases对象，变更引用触发图表刷新
  this.cases = {
    ...this.cases,
    dataTable: this.states_cases
  };
  // 首次加载才需要设为true，后续切换不用修改
  if(!this.mapReady) this.mapReady = true;
}

方案2：手动调用重绘方法 #

1. 先修改模板，给google-chart添加模板引用：

<google-chart #geoChart [data]="cases" *ngIf="mapReady"></google-chart>

2. 组件内引入对应依赖、获取图表实例：

import { ViewChild } from '@angular/core';
import { GoogleChartComponent } from 'ng2-google-charts';

export class AppComponent {
  // 新增属性获取图表实例
  @ViewChild('geoChart') geoChart: GoogleChartComponent;
  // 原有其他代码不变
  // ...
}

3. 数据更新完成后调用draw()方法手动重绘：

pushCaseData(res, week: number) {
  // 清空旧数据、插入新数据的逻辑和方案1一致
  // ...
  // 手动触发重绘
  this.geoChart.draw();
  if(!this.mapReady) this.mapReady = true;
}

补充优化：模板中*ngIf=mapReady建议规范写法改为*ngIf="mapReady"，避免部分场景下编译异常。

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