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

Question

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

我正在为 highcharts 使用以下 npm 包。

• npm install 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”导入 * 作为 highchartsMore； TS 错误“node_modules/@types/highcharts/highcharts-more”解析为非模块实体，无法使用此构造导入。
• 导入 * as highchartsMore from 'highcharts'; highchartsMore(Highcharts) 上的 TS 错误；无法调用其类型缺少调用签名的表达式。 “静态”类型没有兼容的调用签名。
• highcharts-angular 没有使用它，因为 angular 6 有问题 https://github.com/highcharts/highcharts-angular/issues/29

Answer 1

我在 Angular 6 中使用 solidGauge，需要删除 HighCharts 的所有“要求”语句。经过一番折腾后，我得到了这个为更复杂的图表工作。 诀窍是将 .src 添加到会导致错误的 Imports 中。
这是一个工作示例：

在模块中：

import * as Highcharts from 'highcharts'; 
//*****  add .src to the following imports that won't import otherwise  ********
import * as more from 'highcharts/highcharts-more.src';  
import * as solidGauge from 'highcharts/modules/solid-gauge';  
import * as exporting from 'highcharts/modules/exporting.src';    
import * as exportdata from 'highcharts/modules/export-data.src';    
import * as offlineexporting from 'highcharts/modules/offline-exporting.src';     


more(Highcharts);  
solidGauge(Highcharts);  
exporting(Highcharts);    
exportdata(Highcharts);    
offlineexporting(Highcharts);     

在组件中：

    import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; 
    import { chart } from 'highcharts';

    export class GaugeData {
      public width: number;
      constructor(  public title: string, public value: number, public color: string) { }
    }


    @Component({
        selector: 'radialgauge',
        template: `
            <div #chartTarget> </div>
        `
    })
    export class GaugeComponent {
        @ViewChild('chartTarget') chartTarget: ElementRef;
        @Input() data: GaugeData;  
        public thisdata: GaugeData;
        public options: Object;
        public chartwidth: number = 250;
        public chartheight: number = 200;
        public topmargin:number= 50;
        public center: string[] = ['50%', '50%'];
        chart1: Highcharts.ChartObject;

        constructor() {
            this.thisdata = new GaugeData('',0,'#000')
        };

        ngOnChanges() {
            this.thisdata = this.data;
            this.setOptions(this.thisdata);
            this.chart1 = chart(this.chartTarget.nativeElement, this.options);
        }

        ngOnInit() {
            this.thisdata = this.data;
            this.chartwidth = this.width;
            if (this.height) {
                this.chartheight = this.height;
            }
            if (!this.showtitle) {
                this.thisdata.title = '';
                this.topmargin = 0;
                this.center = ['30%', '55%'];
            }
            this.setOptions(this.thisdata);
            this.chart1 = chart(this.chartTarget.nativeElement, this.options);
        }

        setOptions(newData: GaugeData) {

            this.options = {
                chart: {
                    type: 'solidgauge',
                    marginTop: this.topmargin,
                    backgroundColor: "none",
                    height: this.chartheight,
                    width: this.chartwidth
                },
                credits: { enabled: false },
                exporting: {
                    enabled: false,
                    showTable: false
                },
                title: {
                    text: newData.title,
                    style: {
                        fontSize: '12px', color: "#fff", fontfamily: "Arial", width:"200px"
                    },
                },
                tooltip: { enabled: false },
                pane: {
                    startAngle: 0,
                    endAngle: 360,
                    background: [{ // Track for Move
                        outerRadius: '115%',
                        innerRadius: '0%',
                        backgroundColor: "rgba(74, 70, 66, 1)",
                        borderWidth: 0
                    }],
                    center: this.center,
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    lineWidth: 0,
                    tickPositions: [],
                    color: "#fff",
                    title: {
                        text: '<span style="font-size:36px;color:white;font-family: \'Arial\'">' + newData.value + '%</span>',
                        x: 5,
                        y: 43
                    }
                },
                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            enabled: false
                        },
                        stickyTracking: false
                    }
                },
                series: [{
                    data: [{
                        color: newData.color,
                        radius: '115%',
                        innerRadius: '105%',
                        y: newData.value
                    }]
                }]
            }

        }
    }

Answer 2

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

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

solidGauge(Highcharts)

Answer 3

这是我在 Angular 5 项目中导入它的方式，似乎工作正常。

require('highcharts/highcharts-more')(Highcharts);