Angular中使用Chart.js时鼠标悬停出现多图表问题求助

嘿，我帮你搞定这个悬停时弹出多个图表提示的问题！这种情况几乎都是因为重复创建了Chart实例却没有清理旧的——每次组件初始化（比如数据更新、组件重新渲染）时，你又在同一个canvas上新建了一个Chart实例，旧的实例并没有被销毁，悬停时多个实例同时响应，就出现了多提示框的情况。

给你调整后的代码方案，核心就是管理好Chart实例的生命周期：

首先在组件类里声明一个变量来保存图表实例：

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

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourChartComponent implements OnInit, OnDestroy {
  private chartInstance: Chart | undefined; // 用来保存当前的图表实例

  ngOnInit(): void {
    // 假设你的data是从某个地方获取的，这里调用渲染方法
    const yourData = new Map(); // 替换成你的实际数据源
    this.renderChart(yourData);
  }

  ngOnDestroy(): void {
    // 组件销毁时清理图表实例，防止内存泄漏
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
  }

  private renderChart(data: Map<any, any>) {
    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 关键：先销毁旧的图表实例，再创建新的
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }

    this.chartInstance = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: Array.from(data.keys()),
        datasets: [{
          label: 'example chart',
          data: Array.from(data.values()),
          backgroundColor: [
            'rgba(255, 99, 11, 1)',
            'rgba(54, 162, 34, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: false,
        // 你的其他配置项
      }
    });
  }
}

关键步骤说明： #

• 用chartInstance变量追踪当前的Chart实例，每次渲染前检查并销毁旧实例，确保同一个canvas上只有一个活跃的Chart实例。
• 在ngOnDestroy钩子中销毁实例，避免组件销毁后残留的实例占用内存，也防止后续可能的异常。

这样修改后，鼠标悬停时就只会触发当前唯一的Chart实例的提示框，不会再出现多个图表重叠的问题啦！

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