React-chartjs-2图表无法恢复正常尺寸：响应式resize问题求助

你的问题核心是配置项层级错误，加上容器尺寸变化时图表未主动响应，以下是具体修复方案：

1. 修正Chart.js配置项层级 #

你把responsive和maintainAspectRatio放在了plugins对象里，这两个是Chart.js的顶层配置属性，放在plugins下等于未生效，这是导致尺寸不恢复的关键原因。

修改后的配置：

export const options = {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Nivel de Mantenimiento',
    },
  },
};

2. 给图表容器添加明确尺寸约束 #

Mantine的SimpleGrid切换断点时，容器尺寸可能瞬间变动，导致Chart.js无法正确捕获尺寸信息，给每个图表外层div添加基础样式：

<div style={{ minHeight: '300px', width: '100%' }}>
  <Pie data={chartdata} options={options} />
</div>

3. 手动监听窗口resize触发图表重绘 #

部分场景下自动响应机制会失效，通过React的useEffect监听窗口resize事件，手动调用图表实例的resize()方法，确保尺寸变化时重新渲染：

修改后的完整组件代码 #

import React, { useEffect, useRef } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ArcElement,
} from 'chart.js';
import { SimpleGrid } from '@mantine/core';
import { Bar, Doughnut, Pie } from 'react-chartjs-2';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement);

export const options = {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Nivel de Mantenimiento',
    },
  },
};

const GraficaEjempl = ({ chartdata }: any) => {
  const pieRef = useRef<any>(null);
  const barRef = useRef<any>(null);
  const doughnutRef = useRef<any>(null);

  useEffect(() => {
    const handleResize = () => {
      pieRef.current?.chartInstance.resize();
      barRef.current?.chartInstance.resize();
      doughnutRef.current?.chartInstance.resize();
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <SimpleGrid
      breakpoints={[
        { minWidth: 'sm', cols: 2 },
        { minWidth: 'md', cols: 3 },
        { minWidth: 1200, cols: 3 },
      ]}
    >
      <div style={{ minHeight: '300px', width: '100%' }}>
        <Pie ref={pieRef} data={chartdata} options={options} />
      </div>
      <div style={{ minHeight: '300px', width: '100%' }}>
        <Bar ref={barRef} data={chartdata} options={options} />
      </div>
      <div style={{ minHeight: '300px', width: '100%' }}>
        <Doughnut ref={doughnutRef} data={chartdata} options={options} />
      </div>
    </SimpleGrid>
  );
};

export default GraficaEjempl;

额外说明 #

• 若需要更灵活的尺寸控制，可将maintainAspectRatio设为false，完全通过容器样式定义宽高
• 监听resize事件后记得在组件卸载时移除监听，避免内存泄漏

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