React TypeScript中Highcharts PackedBubbleChart加载失败求助

环境依赖版本 #

• Highcharts: 11.4.0
• React Highcharts: 16.1.0
• 已安装附加模块：highcharts-more、exporting、accessibility、annotations
• package.json依赖配置：

  "highcharts": "^11.4.0",
  "react-highcharts": "^16.1.0",
  "highcharts-more": "^0.1.7"
  

问题描述 #

页面加载时直接崩溃，控制台抛出错误，已确认依赖包安装完成且导入语句正确，寻求解决方法。

组件代码 #

import React from 'react';
import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';
import HC_more from 'highcharts/highcharts-more';
import Exporting from 'highcharts/modules/exporting';
import Accessible from 'highcharts/modules/accessibility';
import AnnotationsChart from 'highcharts/modules/annotations';

// 初始化Highcharts模块
HC_more(Highcharts); 
Exporting(Highcharts);
Accessible(Highcharts);
AnnotationsChart(Highcharts);

const PackedBubbleChart = () => {
  const config: Highcharts.Options = {
    chart: {
      type: 'packedbubble',
      height: '100%'
    },
    title: {
      text: 'Simple Bar Chart'
    },
    tooltip: {
      useHTML: true,
      pointFormat: '<b>{point.name}:</b> {point.value}m CO<sub>2</sub>'
    },
    plotOptions: {
      packedbubble: {
        minSize: '30%',
        maxSize: '120%',
        layoutAlgorithm: {
          splitSeries: false,
          gravitationalConstant: 0.02
        },
        dataLabels: {
          enabled: true,
          format: '{point.name}',
          filter: {
            property: 'y',
            operator: '>',
            value: 250
          },
          style: {
            color: 'black',
            textOutline: 'none',
            fontWeight: 'normal'
          }
        }
      }
    },
    series: [{
      name: 'Asia',
      type: 'packedbubble',
      data: [{
        name: 'Nepal',
        value: 6.5
      },
      {
        name: 'Iran',
        value: 6.2
      },
      {
        name: 'Korea',
        value: 6.1
      }]
    }]
  };

  return <ReactHighcharts config={config} />;
};

export default PackedBubbleChart;

组件使用方式 #

<PackedBubbleChart/>

控制台错误信息 #

Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
    at a.error (highcharts.js:12:237)
    at a.Chart.initSeries (highcharts.js:252:415)
    at eval (highcharts.js:277:133)
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:31:26)
    at a.Chart.firstRender (highcharts.js:277:104)
    at a.Chart.eval (highcharts.js:252:304)
    at a.fireEvent (highcharts.js:33:502)
    at a.Chart.init (highcharts.js:251:91)
    at a.Chart.getArgs (highcharts.js:251:16)
ReactHighcharts.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'destroy')
    at n.value (ReactHighcharts.js:1:3070)
    at n.value (react-hot-loader.development.js:707:1)
    at callComponentWillUnmountWithTimer (react-dom.development.js:19582:12)
    at HTMLUnknownElement.callCallback (react-dom.development.js:190:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:239:16)
    at invokeGuardedCallback (react-dom.development.js:294:31)
    at safelyCallComponentWillUnmount (react-dom.development.js:19589:5)
    at commitUnmount (react-dom.development.js:20111:11)
    at commitNestedUnmounts (react-dom.development.js:20165:5)
    at unmountHostComponents (react-dom.development.js:20445:7)

解决方案 #

错误#17表示Highcharts无法识别packedbubble系列类型，原因是你没有导入对应的PackedBubble模块——该模块并不包含在highcharts-more中，需要单独引入：

1. 导入PackedBubble模块
   在现有模块导入代码后添加：

import PackedBubble from 'highcharts/modules/packedbubble';
// 初始化模块
PackedBubble(Highcharts);

2. 优化配置（可选）
   由于已经在chart.type中指定了系列类型为packedbubble，可以删除series数组中每个对象的type属性，减少冗余代码：

series: [{
  name: 'Asia',
  // 移除type: 'packedbubble'
  data: [...]
}]

完成上述修改后，重新启动应用，PackedBubbleChart组件即可正常渲染。

内容的提问来源于stack exchange，提问作者Shivakumar H.G