Highcharts colorAxis动态配置时报Cannot read property 'indexOf' of undefined错误

错误原因 #

这个报错是Highcharts动态更新colorAxis配置时的内部缓存异常导致的：

• 动态增删人员时直接修改了原有colorAxis配置数组，而highcharts-react-official默认采用增量更新逻辑，不会全量重建图表
• 当删除对应人员的colorAxis配置项后，Highcharts内部已销毁了对应color轴实例，但还残留了旧的实例引用缓存，后续更新时尝试调用indexOf方法查找已销毁的实例，就会抛出Cannot read property 'indexOf' of undefined的错误
• 另外配置中marginRight: '10px'的类型错误（应为数值类型）也可能加重配置解析异常

修复方案 #

• 给HighchartsReact组件添加immutable={true}属性，强制每次配置变化时完全重建图表，清除所有旧实例缓存，适合最多10个人员的小数据量场景：

<HighchartsReact
  highcharts={Highcharts}
  options={options}
  immutable={true}
/>

• 每次更新colorAxis配置时，都生成全新的数组实例，不要直接在原数组上push或删除：

// 新增colorAxis项时不要用push，改为展开运算符生成新数组
const newColorAxis = [
  ...oldColorAxis,
  {
    id: selected.mixCode,
    min: colorArray?.[0],
    max: colorArray?.[colorArray.length - 1],
    minColor: colorSet[0],
    maxColor: colorSet[3],
    marker: null,
    showInLegend: true,
    marginRight: 10, // 把字符串改为数值
  }
]
// 删除对应colorAxis项时，用filter生成新数组
const filteredColorAxis = oldColorAxis.filter(item => item.id !== removedMixCode)

• 模块引入可优化：如果不需要热力图能力只用到color轴，可以单独引入coloraxis模块替代heatmap模块，减少不必要的依赖：

import coloraxis from 'highcharts/modules/coloraxis'
coloraxis(Highcharts)

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