点击按钮时如何动态加载含Chart.js的angular-gridster2组件？

你的问题核心在于同类型图表组件的canvas元素ID重复。Chart.js初始化图表时依赖元素ID查找DOM节点，当你新增同类型图表块时，多个块内的canvas使用了相同的固定ID（比如柱状图组件里的chartBar），浏览器会优先匹配第一个出现的ID元素，导致新图表渲染到已有的同类型图表块中，而非新创建的块。

1. 给每个图表组件生成唯一ID #

在图表组件（比如chart-bar.component.ts）中，生成一个唯一标识作为canvas的ID：

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

@Component({
  selector: 'app-chart-bar',
  templateUrl: './chart-bar.component.html',
  styleUrls: ['./chart-bar.component.css']
})
export class ChartBarComponent implements AfterViewInit, OnDestroy {
  // 生成唯一ID，避免重复
  chartId = `chart-bar-${Math.random().toString(36).slice(2, 10)}`;
  chart: Chart | undefined;

  // 确保DOM渲染完成后再初始化图表
  ngAfterViewInit(): void {
    this.createChart();
  }

  createChart() {
    // 使用动态生成的ID获取画布节点
    const ctx = document.getElementById(this.chartId) as HTMLCanvasElement;
    this.chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }

  // 组件销毁时清理图表，避免内存泄漏
  ngOnDestroy(): void {
    this.chart?.destroy();
  }
}

2. 修改组件模板中的canvas ID #

在chart-bar.component.html中，把固定ID替换成动态生成的ID：

<div>
  <canvas [id]="chartId"></canvas>
</div>

3. 其他图表组件同步处理 #

对折线图、饼图等所有类型的图表组件，重复上述步骤，确保每个组件实例的canvas都拥有唯一ID，彻底避免ID冲突问题。

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