Highcharts在React中动态更新数据不生效怎么办？

涵舒 Dev 提问于 2026-03-24 21:10:20 阅读 3

交互

我在用React配合Highcharts做实时数据展示，但每次state变了图表却没更新。明明props传进去的是新数组，但图表还是显示旧数据，是不是哪里写错了？

我试过直接修改series.data，也试过用chart.update()，但都没反应。下面是我的组件代码：

useEffect(() => {
  const chart = Highcharts.chart('chart-container', {
    series: [{ data: props.data }]
  });
  return () => chart.destroy();
}, [props.data]);

我来解答赞 0 收藏

反馈

1 条解答

设计师雨路 Lv1

Highcharts在React里更新数据要用ref，直接在useEffect里创建chart不行。试试这样：

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

import Highcharts from 'highcharts';



const ChartComponent = ({ data }) => {

  const chartRef = useRef(null);



  useEffect(() => {

    if (!chartRef.current) {

      chartRef.current = Highcharts.chart('chart-container', {

        series: [{ data }]

      });

    } else {

      chartRef.current.series[0].setData(data);

    }

  }, [data]);



  return ;

};



export default ChartComponent;

2026-03-24 21:11