Angular项目集成HighCharts仪表盘图表报错求助

在现有Angular项目中，此前已成功使用Highcharts的其他图表类型，现在尝试实现仪表盘（gauge）图表展示统计数据时，浏览器控制台报错，图表无法正常加载。报错截图如下：

组件代码（comparisons.component.ts） #

import { Component, Input, OnInit } from '@angular/core';
import { rotateAnimation } from 'src/app/shared/animations';
import * as HighCharts from 'highcharts';
import { StatisticsService } from '../../service/statistics.service';
import { JobPostComparisonOutputDto } from '../../models/job-post-comparison-output.model';

@Component({
    selector: 'app-comparisons',
    templateUrl: './comparisons.component.html',
    styleUrls: ['./comparisons.component.scss'],
    animations: [rotateAnimation]
})
export class ComparisonsComponent implements OnInit {

    @Input() jobPostId: number;
    comparisonsStatistics: JobPostComparisonOutputDto;

    constructor(
      private statisticsService: StatisticsService
    ) {}

    ngOnInit(): void {
      this.statisticsService.getComparisonsStatistics(this.jobPostId).subscribe((res) => {
        this.comparisonsStatistics = res;
        setTimeout(() => {
          this.generateGaugeChart();
        }, 500);
      });
    }

    generateGaugeChart() {
      this.comparisonsStatistics.listOfJobPostComparisonStatisticsPerRound.forEach(res=>{
        HighCharts.chart('gaugeChart_' + res.roundNumber, {
          chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            height: '80%'
          },
          title: {
            text: 'Speedometer'
          },

          pane: {
            startAngle: -90,
            endAngle: 89.9,
            background: null,
            center: ['50%', '75%'],
            size: '110%'
          },

          yAxis: {
            min: 0,
            max: 200,
            tickPixelInterval: 72,
            lineWidth: 0,
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B', // green
                thickness: 20
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D', // yellow
                thickness: 20
            }, {
                from: 160,
                to: 200,
                color: '#DF5353', // red
                thickness: 20
            }]
          },

          series: [{
            type: undefined,
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
          }]

        });
      })
    }
}

模板代码（comparisons.component.html） #

<div class="row mt-3 bg-white p-2 pt-4 rounded box-shadow" *ngFor="let item of comparisonsStatistics.listOfJobPostComparisonStatisticsPerRound">
   <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div [id]="'gaugeChart_' + item.roundNumber" style="width: 100%; height: 400px; margin: 0 auto"></div>
        </div>
      </div>
    </div>
</div>

已尝试的解决步骤 #

• 项目中未在comparisons.module.ts配置Highcharts相关服务/模块（其他图表类型可正常工作）
• 尝试将HighchartsChartModule添加到comparisons.module.ts，但问题仍未解决

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