使用ng2-charts时数据变更后图表不更新，调用update报错如何解决

问题根因 #

1. this.chart 为 undefined 的原因 #

• Angular 8及以上版本中，@ViewChild 默认配置为 static: false，仅在 ngAfterViewInit 生命周期触发、视图完全渲染后才能查询到 BaseChartDirective 实例。若在 ngOnInit 或更早阶段调用 update 方法，实例还未完成挂载，自然为 undefined。
• 若你的 canvas 元素被 *ngIf 等结构指令控制显隐，当指令条件不成立时元素不存在，@ViewChild 也无法查询到对应实例。
• 若你在接口异步回调中使用普通函数而非箭头函数，会导致 this 指向丢失，无法正确获取组件上的 chart 属性。

2. 首次渲染正常、后续数据更新图表不刷新的原因 #

ng2-charts 对输入属性的变更检测依赖引用变化，部分版本中直接替换数组可能无法被变更检测捕获，或者需要手动触发实例更新才会重绘。

修复方案 #

1. 调整 @ViewChild 声明，调用更新前增加实例存在性判断
2. 赋值新数据时主动生成新数组，触发引用变更
3. 确保仅在视图初始化完成后调用更新方法

修复后代码示例 #

模板代码（无大改动，可保留原有配置）

<canvas baseChart [data]="chartData" [colors]="chartColors" [options]="{ tooltips: { enabled: false } }"
  chartType="pie">
</canvas>

组件类代码

import { Component, ViewChild, BaseChartDirective, AfterViewInit, OnInit } from '@angular/core';

export class TransactionDetailComponent implements OnInit, AfterViewInit {
  // 若canvas不会被*ngIf控制显隐，可设置static: true让ngOnInit阶段即可拿到实例
  @ViewChild(BaseChartDirective, { static: false }) chart?: BaseChartDirective;
  chartData: number[] = [];

  ngAfterViewInit(): void {
    // 视图初始化完成后可安全调用初始数据生成逻辑
    // this.generateChartData();
  }

  generateChartData() {
    // 此处替换为你的接口请求逻辑，注意回调要用箭头函数保证this指向正确
    this.fetchDataFromApi().then(newData => {
      // 用扩展运算符生成新数组，主动触发引用变更
      this.chartData = [...newData];
      // 调用更新前先判断实例存在，避免undefined报错
      if (this.chart) {
        this.chart.update();
      }
    });
  }

  // 示例接口请求方法，替换为你的实际逻辑
  private fetchDataFromApi(): Promise<number[]> {
    return Promise.resolve([20, 30, 50]);
  }
}

若仍无法触发更新，可增加微任务延迟处理 #

部分场景下变更检测队列未清空时，直接赋值可能不生效，可通过0延迟setTimeout强制等待一轮变更检测完成：

generateChartData() {
  this.fetchDataFromApi().then(newData => {
    this.chartData = [];
    setTimeout(() => {
      this.chartData = [...newData];
      this.chart?.update();
    }, 0);
  });
}

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