javascript - 如何将 highchart-more 导入 angular-cli 6 项目

Question

在我的 angular-cli 6 项目中，我使用 highcharts 来创建实体仪表。但我收到这个错误https://www.highcharts.com/errors/17 。因此，为了工作，我必须将 highcharts-more.js 文件添加到我的组件中。

我正在将以下 npm 包用于 highcharts。

• npm 安装 highcharts
• npm install --save-dev @types/highcharts(因为当我尝试导入 highcharts 时 VS Code 建议我)

这是我的组件的代码以及导入:

import {
  AfterViewInit,
  Component,
  ElementRef,
  Injector,
  OnInit,
  ViewChild
} from '@angular/core';
import * as Highcharts from 'highcharts';
import { chart } from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';
import { AbstractDashboardCard } from '../../models/abstract-dashboard-card';
import { DashboardCard } from '../../models/dashboard-card';

highchartsMore(Highcharts);
@Component({
  selector: 'app-luchtkwaliteit',
  templateUrl: './luchtkwaliteit.component.html',
  styleUrls: ['./luchtkwaliteit.component.css']
})
export class LuchtkwaliteitComponent extends AbstractDashboardCard
  implements OnInit, AfterViewInit {
  @ViewChild('chartTarget') chartTarget: ElementRef;
  chart: Highcharts.ChartObject;

  constructor(private injector: Injector) {
    super(
      injector.get(DashboardCard.metadata.NAME),
      injector.get(DashboardCard.metadata.SOURCE),
      injector.get(DashboardCard.metadata.COLS),
      injector.get(DashboardCard.metadata.ROWS)
    );
  }

  ngOnInit() {}

  ngAfterViewInit() {
    const gaugeOptions = {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.1, '#55BF3B'], // green
          [0.5, '#DDDF0D'], // yellow
          [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        min: 0,
        max: 200,
        title: {
          y: -70,
          text: 'Speed'
        },
        labels: {
          y: 16
        }
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      credits: {
        enabled: false
      },
      series: [
        {
          name: 'Speed',
          data: [80],
          dataLabels: {
            format:
              '<div style="text-align:center"><span style="font-size:25px;color: black' +
              '">{y}</span><br/>' +
              '<span style="font-size:12px;color:silver">km/h</span></div>'
          },
          tooltip: {
            valueSuffix: ' km/h'
          }
        }
      ]
    };
    this.chart = chart(this.chartTarget.nativeElement, gaugeOptions);
  }
}

所以我已经做了一些调查如何添加 highcharts-more 但没有找到解决方案。我发现的东西:

• npm install highcharts-more 但它已被弃用，所以我没有使用它 https://www.npmjs.com/package/highcharts-more
• 从 'highcharts/highcharts-more' 导入 * as highchartsMore； TS 错误“node_modules/@types/highcharts/highcharts-more”解析为非模块实体，无法使用此构造导入。
• 导入 * as highcharts更多来自 'highcharts'; highchartsMore(Highcharts) 上的 TS 错误无法调用类型缺少调用签名的表达式。 “静态”类型没有兼容的调用签名。
• highcharts-Angular 没有使用它，因为 Angular 6 出现问题 https://github.com/highcharts/highcharts-angular/issues/29

Answer 1

为了使用solid-gauge系列类型，首先需要导入适当的模块。

import * as Highcharts from 'highcharts'
import * as solidGauge from 'highcharts/modules/solid-gauge'

solidGauge(Highcharts)