如何让React Grid Layout中的Highcharts高度支持响应式调整？

核心原因 #

Highcharts的reflow()方法主要针对容器宽度变化做适配，但不会主动监听容器高度的变更；而recharts基于React props驱动，会自动跟随容器尺寸更新。所以需要手动同步react-grid-layout的高度变化到Highcharts实例。

具体解决方案 #

1. 监听react-grid-layout布局变化 #

react-grid-layout提供onLayoutChange回调，每次布局调整（包括高度变化）都会触发。在回调里提取图表容器的最新高度，传递给Highcharts组件。

2. 绑定ref获取Highcharts实例 #

通过ref拿到Highcharts的Chart实例，手动调整容器高度并触发重绘。

示例代码调整 #

Highcharts子组件

import React, { useRef, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const HighchartsChart = ({ chartOptions, containerHeight }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current?.chart) {
      const chart = chartRef.current.chart;
      // 同步容器高度
      chart.container.style.height = `${containerHeight}px`;
      // 触发重绘适配新高度
      chart.reflow();
    }
  }, [containerHeight]);

  return (
    <HighchartsReact
      ref={chartRef}
      highcharts={Highcharts}
      options={chartOptions}
    />
  );
};

export default HighchartsChart;

父容器（react-grid-layout使用）

import React, { useState } from 'react';
import GridLayout from 'react-grid-layout';
import HighchartsChart from './HighchartsChart';

const GridContainer = () => {
  const [layout, setLayout] = useState([
    { i: 'chart', x: 0, y: 0, w: 6, h: 4 }
  ]);
  // 对应react-grid-layout的rowHeight，根据你的配置修改
  const ROW_HEIGHT = 50;
  const [chartHeight, setChartHeight] = useState(ROW_HEIGHT * 4);

  const handleLayoutChange = (newLayout) => {
    setLayout(newLayout);
    const chartItem = newLayout.find(item => item.i === 'chart');
    if (chartItem) {
      setChartHeight(chartItem.h * ROW_HEIGHT);
    }
  };

  return (
    <GridLayout
      layout={layout}
      onLayoutChange={handleLayoutChange}
      rowHeight={ROW_HEIGHT}
      cols={12}
      width={1200}
    >
      <div key="chart">
        <HighchartsChart
          chartOptions={yourChartOptions}
          containerHeight={chartHeight}
        />
      </div>
    </GridLayout>
  );
};

export default GridContainer;

3. 额外优化：监听容器尺寸变化（可选） #

如果布局变化事件没覆盖所有场景（比如窗口resize同步调整布局），可以给Highcharts容器加ResizeObserver：

useEffect(() => {
  const container = chartRef.current?.chart?.container;
  if (!container) return;

  const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
      const newHeight = entry.contentRect.height;
      if (newHeight) {
        chartRef.current.chart.setSize(null, newHeight, false);
        chartRef.current.chart.reflow();
      }
    });
  });

  observer.observe(container);
  return () => observer.disconnect();
}, []);

关键要点 #

• 确保rowHeight配置和高度计算系数一致，比如rowHeight为50，布局项h为4，实际高度就是4*50=200px
• 调用setSize(null, newHeight)时，第一个参数传null表示保留当前宽度，只修改高度
• 高度变化后必须调用reflow()或redraw()触发图表重新渲染

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