如何让Highcharts基础面积图在页面刷新后保持响应式？

问题现象 #

• 页面首次加载（未刷新）时，面积图响应式正常，能随容器尺寸变化自动适配
• 页面刷新后，响应式功能失效，图表无法随容器/窗口尺寸变化调整

核心问题分析 #

1. 代码中存在无效的value属性（HighchartsReact组件无该props），可能干扰组件渲染逻辑
2. 未显式配置响应式规则，刷新后图表未正确监听容器尺寸变化
3. 组件挂载后未触发初始重绘，导致刷新后图表尺寸计算异常

修复后的代码 #

import * as Yup from 'yup';
import React, { useMemo, useEffect, useRef } from 'react';
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export default function Graph() {
  // 缓存配置项，避免重复创建对象引发不必要重渲染
  const options = useMemo(() => ({
    title: {
      text: 'Emotion Analysis'
    },
    series: [
      { type: 'area', name: 'Honduras', data: [0.9, 0.1, 0.8, 0.7, 0.5] },
      { type: 'area', name: 'Spain', data: [0.3, 0.1, 0.0, 0.2, 0.1] },
      { type: 'area', name: 'Afghanistan', data: [0.3, 0.1, 0.0, 0.2, 0.1] },
      { type: 'area', name: 'Sudan', data: [0.0, 0.2, 0.1, 0.0, 0.0] },
      { type: 'area', name: 'Denmark', data: [0.0, 0.2, 0.2, 0.0, 0.0] },
      { type: 'area', name: 'Nepal', data: [0.1, 0.0, 0.9, 0.0, 0.4] }
    ],
    credits: { enabled: false },
    scrollbar: { enabled: true },
    // 显式配置响应式规则，适配不同容器尺寸
    responsive: {
      rules: [{
        condition: { maxWidth: 500 },
        chartOptions: {
          legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' }
        }
      }]
    }
  }), []);

  const chartRef = useRef(null);

  useEffect(() => {
    // 窗口尺寸变化时触发图表重绘
    const handleResize = () => {
      chartRef.current?.chart?.reflow();
    };

    window.addEventListener('resize', handleResize);
    // 组件挂载后手动触发一次重绘，解决刷新后尺寸异常
    handleResize();

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

  return (
    <div style={{ height: "400px", marginTop: '15px', width: '100%' }}>
      <HighchartsReact
        ref={chartRef}
        containerProps={{ style: { height: "100%", width: "100%" } }}
        highcharts={Highcharts}
        options={options}
      />
    </div>
  );
}

关键修复点 #

• 移除无效的value属性，避免干扰组件渲染
• 使用useMemo缓存配置项，减少不必要的重渲染
• 替换highstock为核心Highcharts库（非必需，但若无需高级功能可减少潜在冲突）
• 添加responsive配置，明确不同尺寸下的图表布局规则
• 通过useRef获取图表实例，监听窗口resize事件手动触发reflow()，确保刷新后图表能正确适配尺寸变化
• 组件挂载后手动触发一次重绘，解决初始尺寸计算错误问题

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