如何使用打字稿实现 HighCharts 以在角度中使用仪表图

Question

在我当前的角度项目中，我尝试使用仪表图显示统计数据。 我使用的库是 HighCharts 我必须提到的是，我在这个项目中使用了 HighCharts 中的其他类型的图表。 但实施后我在浏览器控制台中出现错误并且没有任何反应！ 我得到的错误与以下相同：

我的compares.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'
            }
          }]

        });
      })
    }
}

我的compares.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>

我没有在与 HighCharts 库相关的 Comparisons.module.ts 中实现 ant 服务或模块，并且之前的所有图表都在工作。

我尝试将 HighchartsChartModule 添加到我的 comparisons.module.ts 因为我认为错误提到了与此相关的内容，但没有任何改变。

Answer 1

从官方文档JSFiddle demo来看，需要导入“highcharts-more.js”：

<script src="https://code.highcharts.com/highcharts-more.js"></script>

对于 TypeScript 方式，您应该导入

highcharts-more

，如下所示：

import * as HighCharts from 'highcharts';
import HighChartsMore from 'highcharts/highcharts-more';

HighChartsMore(HighCharts);

示例演示@StackB；itz