highcharts-more 不适用于最新的 [电子邮件受保护]

Question

我正在尝试使用蜘蛛网图

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

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 }: SpiderWebProps) => {
    useEffect(() => {
        HighchartsMore(Highcharts);
    }, []);

    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, // Enable polar chart
            type: 'line', // Use line chart for spiderweb
        },
        yAxis: {
            visible: false,
        },
        series: dummyData,
    };
    return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

但这即使在 useEffect 中也不起作用

我偶然发现了类似的问题

https://www.highcharts.com/forum/viewtopic.php?t=48448

这里的 highcharts 版本是 10.0.0

我降级了 highcharts 版本，然后它开始工作，但想要最新的 highcharts 版本的解决方案

Answer 1

看起来您正尝试在 React 组件中使用 Highcharts 创建蜘蛛网（或雷达）图表。事实上，即使在

useEffect

内部，它也不起作用，这表明设置可能存在一些问题，特别是在使用

highcharts-more

等附加模块初始化 Highcharts 时。

以下是解决该问题并确保与最新 Highcharts 版本兼容的步骤：

更新的代码示例

1. 更正确地加载高图表： 在创建图表之前应注册

   HighchartsMore

   模块。当您需要时，在全局上下文和组件生命周期方法中导入和集成您的库通常是一个很好的做法。

2. 使用效果依赖关系： 确保您的

   useEffect

   具有正确的依赖项，以避免不必要的运行。

3. 检查数据类型： 确保您的数据输入与 Highcharts 的预期类型匹配。

这是您的代码的更新版本；我做了一些调整以确保它正确运行：

import React, { useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from 'highcharts-react-official';
import { spiderWeb } from 'feature/analytics/config';

// Define the props for SpiderWeb component
export type SpiderWebProps = {
    data?: Array<Record<string, string | boolean | number | Array<any>>>;
};

// Initialize HighchartsMore only once
HighchartsMore(Highcharts);

// Configure spider web (radar) options
const options = spiderWeb();

export const SpiderWeb: React.FC<SpiderWebProps> = ({ data }: SpiderWebProps) => {
    // If data is provided, use it, otherwise use dummy data
    const dummyData = data || [
        {
            name: 'Category A',
            data: [80, 90, 70, 85, 60],
            pointPlacement: 'on',
        },
        {
            name: 'Category B',
            data: [70, 85, 60, 75, 95],
            pointPlacement: 'on',
        },
    ];

    // Chart options
    const chartOptions = {
        ...options,
        chart: {
            polar: true,
            type: 'line',
        },
        yAxis: {
            visible: false,
        },
        series: dummyData,
    };

    // Render HighchartsReact component
    return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

主要变化

1. Imports：HighchartsMore 现在在组件外部加载，这可以防止多次执行和潜在的初始化问题。

2. 数据输入：如果未提供

   data

   ，则组件现在回退到

   dummyData

   。

3. 无 useEffect：在这种情况下，由于我们在组件外部初始化 HighchartsMore，因此不需要

   useEffect

   钩子。

额外提示

• 检查版本兼容性：确保您使用的

  highcharts

  和

  highcharts-react-official

  版本与最新的 Highcharts 功能兼容。
• 浏览器控制台：始终检查浏览器中的控制台错误，因为它们可以提供有关问题所在的见解。
• 文档：请参阅 Highcharts 文档以获取更新和示例。

通过这些更改，您的蜘蛛网图表应该可以在最新的 Highcharts 版本中按预期工作。