尝试销毁Chart.js对象时触发TypeError错误的问题求助

针对你遇到的Cannot read properties of undefined (reading 'destroy')错误，本质是调用destroy()时Chart实例未被正确初始化或已丢失，结合你使用的旧版本技术栈，给出以下具体解决方案：

1. 正确初始化Chart实例变量 #

在组件类中明确声明并初始化Chart变量，避免未定义状态：

import { Chart } from 'chart.js';

export class YourComponent {
  // 初始化为undefined，明确类型
  chart1: Chart | undefined;
  chart2: Chart | undefined;
}

2. 调用destroy前先做存在性校验 #

每次销毁图表前，先判断实例是否存在，避免直接调用undefined的方法：

clearCharts(): void {
  // 销毁第一个图表
  if (this.chart1) {
    this.chart1.destroy();
    this.chart1 = undefined; // 销毁后重置变量，避免后续重复调用报错
  }
  // 销毁第二个图表
  if (this.chart2) {
    this.chart2.destroy();
    this.chart2 = undefined;
  }
}

3. 结合@ViewChild确保DOM元素存在 #

直接通过document.getElementById获取canvas可能存在DOM未加载完成的问题，改用Angular的@ViewChild获取模板元素，确保在DOM渲染完成后再初始化图表：

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChild('barChart1') barChart1!: ElementRef<HTMLCanvasElement>;
  @ViewChild('barChart2') barChart2!: ElementRef<HTMLCanvasElement>;
  chart1: Chart | undefined;
  chart2: Chart | undefined;

  ngAfterViewInit(): void {
    // 组件视图初始化完成后再创建图表
    this.renderChart1();
  }

  renderChart1(): void {
    // 先清除旧图表
    this.clearCharts();
    
    const ctx = this.barChart1.nativeElement.getContext('2d');
    if (ctx) {
      this.chart1 = new Chart(ctx, {
        type: 'bar',
        data: { /* 你的查询结果数据 */ },
        options: { /* 图表配置 */ }
      });
    }
  }

  clearCharts(): void {
    // 同步骤2的销毁逻辑
    if (this.chart1) {
      this.chart1.destroy();
      this.chart1 = undefined;
    }
    if (this.chart2) {
      this.chart2.destroy();
      this.chart2 = undefined;
    }
  }
}

对应的HTML模板要添加模板引用变量：

<canvas #barChart1></canvas>
<canvas #barChart2></canvas>

4. 避免在错误的生命周期钩子初始化图表 #

不要在ngOnInit中创建图表，此时组件视图尚未渲染完成，canvas元素可能不存在，导致Chart实例初始化失败，后续调用destroy()时变量仍为undefined。

旧版本注意事项 #

由于你使用的是Chart.js 2.9.4和ng2-charts 2.4.2，需注意：

• destroy()方法执行后，必须手动将实例变量置为undefined，否则下次创建图表时可能出现DOM元素复用的问题
• 多个图表实例要分别管理，不要复用同一个变量

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