Chart.js在Windows 11的Firefox中导致页面卡顿求助

针对你遇到的Angular 7 + Chart.js 4.4.0 + datalabels插件在Windows 11 Firefox中页面冻结的问题，以下是具体的排查和解决思路：

1. 核对插件版本兼容性 #

Chart.js 4.x 对配套插件的版本有明确要求，datalabels插件需要使用 v2.0.0及以上版本 才能适配。如果你的datalabels版本过低，可能在Firefox新环境下出现渲染冲突。建议升级datalabels到对应Chart.js 4.4.0的最新稳定版后再测试。

2. 优化Datalabels配置，排查性能瓶颈 #

你的代码中每个数据集都单独配置了datalabels，且存在全局与数据集层级的配置叠加，可能在Firefox下触发重复渲染逻辑：

• 合并color逻辑：将数据集内datalabels.labels.title.color的函数移到全局datalabels配置中，避免重复计算：

  options: {
    plugins: {
      datalabels: {
        align: "top",
        display: (context) => context.dataset.data[context.dataIndex] !== 0,
        color: (context) => context.dataset.backgroundColor, // 统一color逻辑
        labels: {
          title: {
            font: { 
              family: "'Segoe UI', Arial", size: 14, weight: "500"
            }
          }
        }
      }
    }
  }
  

  同时移除每个数据集内的datalabels配置，减少冗余逻辑。
• 简化display判断：将display函数改为更直接的数值判断，避免上下文频繁取值：

  display: (context) => !!context.dataset.data[context.dataIndex]
  

3. 修复Angular DOM操作与生命周期问题 #

你的代码直接用document.getElementById获取canvas，在Angular环境下可能存在DOM获取时机错误，或重复创建图表实例导致内存泄漏：

• 使用ViewChild获取canvas元素，确保DOM已渲染完成：

  import { ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
  import Chart from 'chart.js/auto';
  import ChartDataLabels from 'chartjs-plugin-datalabels';
  
  export class YourComponent implements AfterViewInit, OnDestroy {
    @ViewChild('cnvID') canvasRef: ElementRef<HTMLCanvasElement>;
    private myChart: Chart | undefined;
  
    ngAfterViewInit() {
      this.drawChart(false); // 在视图初始化完成后调用图表绘制
    }
  
    drawChart(showlegend) {
      // 先销毁旧图表实例，避免内存泄漏
      if (this.myChart) {
        this.myChart.destroy();
      }
      const myContext = this.canvasRef.nativeElement.getContext('2d');
      this.myChart = new Chart(myContext, {
        // ... 你的图表配置
        plugins: [ChartDataLabels]
      });
    }
  
    ngOnDestroy() {
      // 组件销毁时销毁图表，释放资源
      if (this.myChart) {
        this.myChart.destroy();
      }
    }
  }
  

  模板中canvas标签添加#cnvID标识：

  <canvas #cnvID></canvas>
  

4. 针对Firefox的渲染优化 #

Windows 11的Firefox硬件加速可能与Chart.js的Canvas渲染存在冲突：

• 关闭Firefox硬件加速：打开Firefox设置 → 常规 → 性能 → 取消勾选“使用硬件加速模式（如果可用）”，重启浏览器测试。
• 禁用Chart.js动画：动画在某些环境下会触发频繁重绘，导致性能问题，可关闭动画：

  options: {
    animation: { duration: 0 }, // 关闭所有动画
    responsive: true,
    maintainAspectRatio: true
  }
  

5. 逐步简化代码定位问题 #

如果以上方法无效，通过逐步简化代码缩小问题范围：

• 先移除datalabels插件，只渲染纯Chart.js条形图，若页面不再冻结，说明问题出在datalabels插件的配置或兼容性上。
• 移除堆叠（stacked: true）、maxBarThickness、mirror等非核心配置，逐步添加，定位具体导致冻结的配置项。

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