Angular应用使用Chart.js创建多图表时出现上下文与画布占用报错求助

报错原因分析 #

1. 第一个报错 Failed to create chart: can't acquire context from the given item 是因为你在ngOnInit生命周期初始化图表，此时组件模板的DOM还未完成渲染，即使传入了正确的ID，也无法从DOM中获取到对应的canvas元素，自然拿不到绘图上下文。
2. 第二个报错 Canvas is already in use 是因为你没有在组件销毁时主动释放图表实例，仅在ngOnInit里做销毁判断无效（ngOnInit只会在组件初始化时执行一次），残留的图表实例占用了canvas资源。另外直接通过ID查找DOM的方式在多组件复用场景下也容易出现冲突。

修复方案 #

1. 修改模板文件（bar-chart.component.html）

不用绑定ID，直接给canvas加模板引用变量，避免ID传递和冲突问题：

<canvas #chartCanvas></canvas>

2. 修改组件逻辑文件（bar-chart.component.ts）

• 用@ViewChild直接获取canvas元素的DOM引用，不需要再通过ID查找DOM
• 把初始化逻辑移到ngAfterViewInit生命周期（此时视图已渲染完成，可正常拿到canvas元素）
• 实现OnDestroy钩子，组件销毁时主动销毁图表实例释放资源

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html'
})
export class BarChartComponent implements AfterViewInit, OnDestroy {
  @ViewChild('chartCanvas') private chartCanvas!: ElementRef<HTMLCanvasElement>;
  private myChart?: Chart;

  ngAfterViewInit(): void {
    // 初始化前先销毁旧实例，避免重复初始化冲突
    if (this.myChart) {
      this.myChart.destroy();
    }
    const ctx = this.chartCanvas.nativeElement.getContext('2d');
    if (!ctx) return;

    this.myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [
          {
            label: 'Label Teste',
            data: [19, 12, 10, 8, 7],
            backgroundColor: [
              '#4B79A1',
              '#6693BD',
              '#82AED9',
              '#9ECAF6',
              '#BBE6FF',
            ],
            borderColor: [
              '#4B79A1',
              '#6693BD',
              '#82AED9',
              '#9ECAF6',
              '#BBE6FF',
            ],
            borderWidth: 1,
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时主动释放图表资源
    if (this.myChart) {
      this.myChart.destroy();
      this.myChart = undefined;
    }
  }
}

3. 修改父组件调用代码

不需要再传递idChart参数：

<div class="barCharts">
  <app-bar-chart></app-bar-chart>
  <app-bar-chart></app-bar-chart>
  <app-bar-chart></app-bar-chart>
</div>

如果后续需要给每个图表传自定义配置（比如数据、标签），直接新增对应的@Input属性接收即可，不需要依赖ID参数。

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