Highcharts@12.0.2中highcharts-more失效，蜘蛛图无法渲染求解决方案

问题根源 #

Highcharts 12.x版本对模块加载时机的要求比10.x更严格，你之前在useEffect中初始化highcharts-more的方式，会导致HighchartsReact组件挂载时，Highcharts实例还未加载极坐标图表所需的扩展，从而渲染失败。

解决方案 #

1. 提前初始化Highcharts扩展

直接在文件顶部调用HighchartsMore(Highcharts)，确保Highcharts在被组件使用前就加载好所需的功能模块，不要等到组件渲染时才初始化。

修改后的完整代码：

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

// 关键：在组件定义前初始化扩展
HighchartsMore(Highcharts);

import { spiderWeb } from 'feature/analytics/config';

export type SpiderWebProps = {
    data?: Array<Record<string, string | boolean | number | Array<any>>>;
};

const options = spiderWeb();

export const SpiderWeb: React.FC<SpiderWebProps> = ({ data }) => {
    const dummyData = [
        {
            name: 'Category A',
            data: [80, 90, 70, 85, 60],
            pointPlacement: 'on',
        },
        {
            name: 'Category B',
            data: [70, 85, 60, 75, 95],
            pointPlacement: 'on',
        },
    ];
    const chartOptions = {
        ...options,
        chart: {
            polar: true,
            type: 'line',
        },
        yAxis: {
            visible: false,
        },
        series: dummyData,
    };
    return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

2. 排查配置合并冲突

如果spiderWeb()返回的基础配置中已经包含chart属性，直接用...options合并时可能会覆盖polar: true设置。可以调整合并顺序，优先保留自定义配置：

const chartOptions = {
    ...options,
    chart: {
        // 继承基础配置的chart属性，再覆盖关键设置
        ...options.chart,
        polar: true,
        type: 'line',
    },
    yAxis: {
        visible: false,
    },
    series: dummyData,
};

3. 确保依赖版本兼容

检查highcharts-react-official版本是否适配Highcharts 12.0.2，建议安装3.2.0及以上版本的绑定库：

npm install highcharts-react-official@^3.2.0

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