Chart.js响应式动画图表尺寸持续缩小至0的问题求助

针对你在Linux系统Edge浏览器中遇到的Chart.js图表加载后持续缩小的问题，以下是具体原因及解决方案：

1. 容器尺寸无明确约束触发递归重排 #

Linux版Edge（Chromium内核）在处理未设置固定尺寸的Canvas容器时，会触发递归重排逻辑：

• 当Chart.js启用responsive: true时，会依赖容器尺寸自适应图表大小；若容器仅设置width: 100%但未指定固定/最小高度，浏览器会反复计算容器高度，导致每次重绘都缩小一点，最终仅保留X轴。
• 解决方法：给Canvas的父容器设置明确的高度约束，示例CSS：

  .chart-container {
    height: 400px;
    width: 100%;
  }
  

  React项目中可直接在容器元素上内联设置样式：

  <div style={{ height: '400px', width: '100%' }}>
    <canvas ref={canvasRef} />
  </div>
  

2. 设备像素比（DPR）计算异常 #

Linux桌面环境下，Edge的DPR计算可能出现偏差，导致Chart.js的自适应逻辑误判容器尺寸：

• 解决方法：初始化图表时手动指定DPR，或强制使用系统默认值：

  const chartInstance = new Chart(canvasRef.current, {
    type: 'line',
    data: yourChartData,
    options: {
      responsive: true,
      maintainAspectRatio: true,
      devicePixelRatio: window.devicePixelRatio || 1
    }
  });
  

3. React项目中重复创建Chart实例 #

若React组件每次状态更新都重新创建Chart实例，会导致Canvas反复销毁重建，触发尺寸异常：

• 解决方法：使用useRef缓存Chart实例，仅在组件挂载或数据变化时初始化/更新图表：

  import { useRef, useEffect } from 'react';
  import Chart from 'chart.js/auto';
  
  const ChartComponent = ({ chartData }) => {
    const canvasRef = useRef(null);
    const chartRef = useRef(null);
  
    useEffect(() => {
      if (!canvasRef.current) return;
  
      // 首次挂载创建实例
      if (!chartRef.current) {
        chartRef.current = new Chart(canvasRef.current, {
          type: 'line',
          data: chartData,
          options: { responsive: true }
        });
      } else {
        // 数据变化时仅更新数据而非重建实例
        chartRef.current.data = chartData;
        chartRef.current.update();
      }
  
      // 组件卸载时销毁实例
      return () => {
        chartRef.current?.destroy();
        chartRef.current = null;
      };
    }, [chartData]);
  
    return <canvas ref={canvasRef} />;
  };
  

4. Edge浏览器版本bug #

部分旧版Linux Edge存在Canvas渲染的特定bug，可尝试：

• 升级Edge至最新稳定版本
• 在浏览器设置中禁用「硬件加速」（路径：设置 → 系统和性能 → 使用硬件加速（如有可用）），再测试图表显示效果

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