Chart.js在网格列容器中无法响应尺寸调整的问题求助

我之前也踩过Chart.js自适应的坑，结合你给出的代码，咱们一步步来搞定这个问题：

首先，修正一个容易忽略的小bug：CSS类名不匹配 #

你JSX里的容器类是chart-wrapper，但CSS里写的是pie-wrapper，这会导致你设置的position: relative等样式根本没生效！先把CSS里的类名改成和JSX一致：

.chart-container {
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.chart-wrapper { /* 这里改成和JSX对应的类名 */
  position: relative;
  width: 100%;
  height: 100%;
}

确保父容器有明确的尺寸约束 #

height: 100%是依赖父元素高度的，如果你的chart-container所在的网格列（或者它的父元素）没有设置明确的高度，那100%就相当于没设置。你需要给网格列的容器也加上height: 100%，或者设置具体的高度值（比如height: 400px），这样chart-wrapper的height: 100%才能正确继承。

手动监听容器尺寸变化，触发Chart.js重绘 #

Chart.js默认只监听window的resize事件，但如果是网格布局调整（比如屏幕缩小导致网格列尺寸变化），有时候不会触发window的resize，或者触发不及时。这时候我们可以用ResizeObserver来监听chart-wrapper的尺寸变化，主动调用图表的resize()方法。

修改你的React组件代码（假设是React环境）：

import { useEffect, useRef } from 'react';
import { Pie } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { Chart, registerables } from 'chart.js';

// 注册Chart.js需要的组件和插件
Chart.register(...registerables, ChartDataLabels);

const YourPieChart = () => {
  const chartRef = useRef(null);
  const wrapperRef = useRef(null);

  useEffect(() => {
    const observer = new ResizeObserver(() => {
      if (chartRef.current) {
        chartRef.current.resize(); // 触发图表重绘，适配新尺寸
      }
    });

    if (wrapperRef.current) {
      observer.observe(wrapperRef.current);
    }

    // 组件卸载时取消监听
    return () => {
      if (wrapperRef.current) {
        observer.unobserve(wrapperRef.current);
      }
    };
  }, []);

  return (
    <div className="chart-container">
      <div className="chart-wrapper" ref={wrapperRef}>
        <Pie 
          ref={chartRef}
          data={{
            labels: ['A', 'B', 'C'],
            datasets: [{
              data: [a.length, b.length, c.length],
              backgroundColor: ['rgba(127, 255, 212, 0.7)', 'rgba(255, 215, 32, 0.7)', 'rgba(175, 175, 175, 0.5)'],
              borderColor: 'rgba(255, 255, 255, 0.2)',
              borderWidth: 1,
              offset: 20,
              hoverOffset: 40,
            }],
          }} 
          options={{
            plugins: {
              legend: { display: false },
              datalabels: {
                color: 'rgba(255, 255, 255, 0.7)',
                font: { weight: 'bold', size: 18 },
                formatter: (value) => value > 0 ? value : '',
              },
              title: { display: true, text: "Pie" }
            },
            maintainAspectRatio: false,
          }} 
        />
      </div>
    </div>
  );
};

export default YourPieChart;

为什么这么做？ #

• ResizeObserver可以直接监听容器的尺寸变化，不管是window resize还是网格布局调整导致的，都能及时捕获。
• 调用chart.resize()会让Chart.js重新计算图表的尺寸，适配新的容器大小，不用刷新页面就能完成自适应。

按照这几步调整后，你的饼图应该就能在屏幕缩放或者网格布局变化时，自动自适应容器的宽高了！

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