Highcharts在React中更新数据后图表不刷新怎么办？

司徒翌萌提问于 2026-02-16 12:32:31 阅读 34

组件

我在React项目里用Highcharts做柱状图，初始化数据没问题，但通过按钮更新数据后图表没变化，这是为什么？

代码是这样的：


import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highcharts';

const ChartComponent = () => {
  const [data, setData] = useState([10, 20, 30]);

  const handleUpdate = () => {
    setData([40, 50, 60]); // 数据确实更新了
  };

  return (
    <div>
      <button onClick={handleUpdate}>更新数据</button>
      <HighchartsReact
        highcharts={Highcharts}
        options={{
          series: [{ data: data }]
        }}
      />
    </div>
  );
};

控制台没报错，但点击按钮后图表还是显示旧数据。试过用forceUpdate()也不行，直接操作ref的chart.update()又提示undefined。是不是需要在某个地方加key属性？或者Highcharts的React封装有特殊用法？

我来解答赞 3 收藏

反馈

1 条解答

春艳 Lv1

这个问题的核心在于React的渲染机制和Highcharts的更新机制之间的差异。你遇到的问题是因为 HighchartsReact 组件没有检测到 options 的变化，导致图表没有重新渲染。

解决方法有两种，我建议优先使用第一种，因为它更符合React的最佳实践：

第一种方法是给 HighchartsReact 组件添加一个动态的 key 属性。当数据更新时，改变 key 的值，强制组件重新挂载。比如这样：

import React, { useState } from 'react';

import HighchartsReact from 'highcharts-react-official';

import Highcharts from 'highcharts/highcharts';



const ChartComponent = () => {

  const [data, setData] = useState([10, 20, 30]);

  const [chartKey, setChartKey] = useState(0); // 添加一个key状态



  const handleUpdate = () => {

    setData([40, 50, 60]);

    setChartKey(prevKey => prevKey + 1); // 更新key值

  };



  return (

    <div>

      <button onClick={handleUpdate}>更新数据</button>

      <HighchartsReact

        key={chartKey} // 使用动态key

        highcharts={Highcharts}

        options={{

          series: [{ data: data }]

        }}

      />

    </div>

  );

};

注意，虽然这种方法简单有效，但频繁地通过改变 key 强制重新挂载组件可能会影响性能，特别是数据更新频率很高的场景下。如果数据更新很频繁，可以考虑第二种方法。

第二种方法是直接调用 HighchartsReact 提供的 chart.update() 方法。这需要通过 ref 获取图表实例。代码如下：

import React, { useState, useRef } from 'react';

import HighchartsReact from 'highcharts-react-official';

import Highcharts from 'highcharts/highcharts';



const ChartComponent = () => {

  const [data, setData] = useState([10, 20, 30]);

  const chartRef = useRef(null);



  const handleUpdate = () => {

    setData([40, 50, 60]);

    if (chartRef.current) {

      chartRef.current.chart.series[0].setData([40, 50, 60]); // 直接更新数据

    }

  };



  return (

    <div>

      <button onClick={handleUpdate}>更新数据</button>

      <HighchartsReact

        ref={chartRef} // 绑定ref

        highcharts={Highcharts}

        options={{

          series: [{ data: data }]

        }}

      />

    </div>

  );

};

这里要注意安全问题：确保 chartRef.current 存在再调用方法，否则会报错。另外，如果你的数据来源是用户输入或者其他外部接口，一定要对数据进行验证和清理，避免恶意数据导致的安全隐患。

总结一下，推荐使用第一种方法（动态 key），它更符合React的声明式编程风格。如果性能有瓶颈，再考虑第二种方法。两种方法都能解决问题，选一个适合你的场景就行。

2026-02-16 13:01