Angular中用Highcharts创建geo-heatmap缺失模块报错求助

我是Highcharts新手，在Angular项目中创建geo-heatmap时，出现了缺失模块的报错（错误提示：Highcharts error #17，对应模块未加载）。以下是初始化geo-heatmap的函数代码及项目依赖配置，求帮忙解决。

初始化函数代码 #

initHeatMap(topology: any, Highcharts: any, div: string,): void {
        let minColor: any;
        let maxColor: any
        let minValue = 1;
        let maxValue = 10;
        if (Highcharts?.getOptions()?.colors) {
            minColor = Highcharts.getOptions().colors?.[0] || '#615E9B';
        }
        if (Highcharts?.getOptions()?.colors) {
            maxColor = Highcharts.getOptions().colors?.[1] || '#00e272';
        }
        Highcharts.mapChart(div, {
            chart: {
                map: topology,
                type:'geoheatmap'
            },

            title: {
                text: 'Geo Heatmap',
                align: 'left'
            },
            subtitle: {
                text: 'HighChart Geo Heatmap',
                align: 'left'
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                },
                enableButtons: true,
                enableMouseWheelZoom: true
            },
            colorAxis: {
                min: 0,
                stops: [
                    [0, '#00ff00'], // 低强度颜色
                    [0.5, '#ffff00'], // 中等强度颜色
                    [1, '#ff0000'] // 高强度颜色
                ]
            },
            series: [{
                name: 'Heatmap',
                keys: ['hc-key', 'value'],
                joinBy: 'hc-key',
                data: this.getData(),
                mapData: topology,
                states: {
                    hover: {
                        color: minColor
                    }
                },
                tooltip: {
                    pointFormat: '{point.name}: {point.value}'
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }]
        });
    }

Package.json依赖配置 #

"dependencies": {
    "@angular/animations": "~15.2.9",
    "@angular/cdk": "^14.1.2",
    "@angular/common": "~15.2.9",
    "@angular/compiler": "~15.2.9",
    "@angular/core": "~15.2.9",
    "@angular/forms": "~15.2.9",
    "@angular/localize": "~15.2.9",
    "@angular/platform-browser": "~15.2.9",
    "@angular/platform-browser-dynamic": "~15.2.9",
    "@angular/router": "~15.2.9",
    "@ng-bootstrap/ng-bootstrap": "^14.2.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@types/googlemaps": "^3.43.3",
    "alertifyjs": "^1.13.1",
    "angular-datatables": "^15.0.1",
    "angular-ng-autocomplete": "^2.0.12",
    "angular-plotly.js": "^4.0.4",
    "bootstrap": "^5.3.0",
    "core-js": "^3.25.5",
    "datatables-fixedcolumns": "^3.1.0",
    "datatables.net": "^1.12.1",
    "datatables.net-dt": "^1.12.1",
    "datatables.net-select": "^1.4.0",
    "datatables.net-select-dt": "^1.4.0",
    "echarts": "^5.4.2",
    "highcharts": "^11.1.0",
    "highcharts-angular": "^3.1.2",
    "highcharts-custom-events": "^3.0.10",
    "@highcharts/map-collection": "^2.0.1",
    "jspdf": "^2.5.1",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.9.4",
    "moment-timezone": "^0.5.34",
    "ng-http-loader": "^12.0.0",
    "ng-sidebar": "^9.4.2",
    "ngx-chips": "^3.0.0",
    "ngx-dropzone": "^3.1.0",
    "ngx-echarts": "^14.0.0",
    "ngx-summernote": "^0.8.9",
    "plotly.js-dist-min": "^2.14.0",
    "primeicons": "^5.0.0",
    "primeng": "^15.4.1",
    "rxjs": "~7.5.6",
    "summernote": "^0.8.20",
    "uuid": "^9.0.1",
    "xlsx": "^0.18.5",
    "yarn": "^1.22.19",
    "zone.js": "^0.11.8"
}

解决步骤 #

1. 导入并注册缺失的Highcharts模块
   Geo-Heatmap属于Highcharts地图扩展，需要手动导入map和geoheatmap模块并注册到Highcharts实例。在你的Angular组件中添加以下代码：

import * as Highcharts from 'highcharts';
import MapModule from 'highcharts/modules/map';
import GeoHeatmapModule from 'highcharts/modules/geoheatmap';

// 注册模块到Highcharts
MapModule(Highcharts);
GeoHeatmapModule(Highcharts);

2. 确认chart配置细节

• 确保chart.type设置为geoheatmap（你的代码中已设置，无需修改）
• 检查topology数据是否为标准的Highmaps格式，可直接使用@highcharts/map-collection中的数据示例验证

3. 验证依赖兼容性
   当前使用的highcharts@11.1.0与highcharts-angular@3.1.2版本兼容，无需调整依赖版本。

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