React中为Highcharts添加数据系列并移除加载状态，无需创建新图表

问题背景 #

我在React项目中使用Highcharts组件，已创建初始图表配置项：

/**
 * Initial chart options, with "loading" enabled
 */
const chartOptions = {
  accessibility: {
    enabled: false
  },
  chart: {
    type: "column",
    events: {
      load() {
        const chart = this;
        chart.showLoading(`${LOADING}...`);
      }
    }
  }
};

调用API获取数据后，需要移除加载状态并添加数据，当前实现方式如下：

const [options, setOptions] = useState(chartOptions);

useEffect(() => {
    if (detail) {
      setOptions({
        ...chartOptions,
        chart: {
          type: "column"
        },
        xAxis: {
          categories: detail.map(
            (item) =>
              `${item.data_em.substring(4, 6)}/${item.data_em.substring(0, 4)}`
          )
        },
        series: [
          {
            name: "Alfa",
            color: "#69BC66",
            data: detail.map((item) => item.ricevuti)
          },
          {
            name: "Beta",
            color: "#DC3545",
            data: detail.map((item) => item.mancanti)
          },
        ]
      });
    }
  }, [detail]);


<ChartComponent options={options} />

当前方案可正常运行，但担心每次更新options会创建新的图表实例，想知道是否有更优实现方法。

更优实现方案 #

1. 直接操作图表实例（推荐） #

通过useRef获取图表实例，调用Highcharts原生API更新数据和加载状态，完全避免组件重新渲染或创建新实例：

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

const ChartContainer = ({ detail, LOADING }) => {
  // 保存图表实例引用
  const chartRef = useRef(null);
  
  // 基础配置：移除load事件的自动加载，改为手动控制
  const baseChartOptions = {
    accessibility: { enabled: false },
    chart: { type: "column" },
    // 提前定义系列的基础配置，避免动态添加
    series: [
      { name: "Alfa", color: "#69BC66", data: [] },
      { name: "Beta", color: "#DC3545", data: [] }
    ]
  };

  // 组件挂载时显示加载状态
  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.chart.showLoading(`${LOADING}...`);
    }
  }, [LOADING]);

  // 数据更新时操作图表
  useEffect(() => {
    if (!detail || !chartRef.current) return;

    const chart = chartRef.current.chart;
    // 隐藏加载状态
    chart.hideLoading();
    
    // 更新X轴分类
    chart.xAxis[0].setCategories(
      detail.map(item => `${item.data_em.substring(4, 6)}/${item.data_em.substring(0, 4)}`)
    );
    
    // 更新系列数据：最后一个参数设为false，最后一次设为true触发批量重绘
    chart.series[0].setData(detail.map(item => item.ricevuti), false);
    chart.series[1].setData(detail.map(item => item.mancanti), true);
  }, [detail]);

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

2. 优化状态更新逻辑 #

如果偏好React状态管理的方式，需避免完全重置配置，只更新变化的部分，减少不必要的组件渲染：

import { useState, useEffect } from 'react';
import HighchartsReact from 'highcharts-react-official';

const ChartContainer = ({ detail, LOADING }) => {
  const [options, setOptions] = useState({
    accessibility: { enabled: false },
    chart: { 
      type: "column",
      events: {
        load() {
          this.showLoading(`${LOADING}...`);
        }
      }
    },
    series: [
      { name: "Alfa", color: "#69BC66", data: [] },
      { name: "Beta", color: "#DC3545", data: [] }
    ]
  });

  useEffect(() => {
    if (!detail) return;

    setOptions(prev => ({
      ...prev,
      // 保留原chart配置，仅移除加载事件（可选）
      chart: { ...prev.chart, events: {} },
      xAxis: {
        categories: detail.map(item => `${item.data_em.substring(4, 6)}/${item.data_em.substring(0, 4)}`)
      },
      series: [
        { ...prev.series[0], data: detail.map(item => item.ricevuti) },
        { ...prev.series[1], data: detail.map(item => item.mancanti) }
      ]
    }));
  }, [detail]);

  return <HighchartsReact options={options} />;
};

方案对比 #

• 直接操作实例：性能最优，完全避免创建新图表实例，是Highcharts官方推荐的动态更新方式，适合数据频繁变化的场景。
• 优化状态更新：符合React状态管理习惯，但仍可能触发组件浅渲染（取决于HighchartsReact的内部实现），适合简单场景。

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