React打包后Highcharts报activeDataLabelStyle未定义错误如何解决

根因分析 #

你在更新Highcharts配置时直接全量替换了整个options对象，丢失了初始化时声明的x轴、y轴、图表基础配置等内容。生产模式打包时Tree Shaking会清除Highcharts未被显式引用的默认配置，缺少配置的情况下图表实例读取activeDataLabelStyle属性时就会抛出undefined错误。开发模式下Tree Shaking不生效，默认配置完整所以运行正常；离开页面再返回时组件会重新挂载，完整的初始配置会被重新加载，因此后续更新不会报错。

解决方案 #

方案1：修改配置更新逻辑，保留原有配置 #

更新options时采用增量更新的方式，基于原有配置修改需要变更的series字段即可，不要全量替换：

async function handleSelect(selected, setLoading) {
  const journey = await axios.get('/api/getJourney?id=' + selected.id);
  console.log(journey.data);
  // 基于原state做增量更新
  setOptions(prev => ({
    ...prev,
    series: [
      {
        data: journey.data,
        name: 'Vehicle ' + selected.id,
      },
    ],
  }));
  setLoading(false);
}

方案2：通过图表实例直接更新数据（更推荐） #

如果使用的是highcharts-react-official官方封装组件，可以通过ref直接获取图表实例操作数据，无需修改整个配置对象，性能和稳定性更高：

1. 声明图表ref

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

const chartRef = useRef(null);

2. 给组件绑定ref

<HighchartsReact
  highcharts={Highcharts}
  options={options}
  ref={chartRef}
/>

3. 直接调用实例方法更新数据

async function handleSelect(selected, setLoading) {
  const journey = await axios.get('/api/getJourney?id=' + selected.id);
  console.log(journey.data);
  const chart = chartRef.current?.chart;
  if (chart) {
    chart.series[0].setData(journey.data);
    chart.series[0].update({ name: 'Vehicle ' + selected.id });
  }
  setLoading(false);
}

内容的提问来源于stack exchange，提问作者C. Gokhan