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

在我的angular cli 6项目中，我正在使用highcharts创建一个实心量规。但是我收到了这个错误。因此，为了工作，我必须将highcharts-more.js文件添加到我的组件中

我正在使用以下npm包制作海图

• npm安装highcharts
• npm安装--保存dev@types/highcharts（因为VS代码在我尝试导入highcharts时建议我）

以下是我的组件和导入的代码：

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);
  }
}

导入{
AfterViewInit，
组成部分，
ElementRef，
注射器，
奥尼特，
视图儿童
}从“@angular/core”开始；
从“Highcharts”导入*作为Highcharts；
从“highcharts”导入{chart}；
从“海图/海图更多”导入海图更多；
从“../../models/abstract dashboardcard”导入{AbstractDashboardCard}；
从“../../models/DashboardCard”导入{DashboardCard}；
海图（海图）；
@组成部分({
选择器：'app luchkwaliteit'，
templateUrl:'./luchkwaliteit.component.html'，
样式URL:['./luchkwaliteit.component.css']
})
导出类LuchKwalitietComponent扩展了AbstractDashboardCard
实现OnInit、AfterViewInit{
@ViewChild（'chartTarget'）chartTarget:ElementRef；
图表：Highcharts.ChartObject；
构造函数（专用注入器：注入器）{
超级(
获取（DashboardCard.metadata.NAME），
注射器.get（仪表板卡.metadata.SOURCE），
injector.get（DashboardCard.metadata.COLS），
获取（仪表板卡.元数据.行）
);
}
ngOnInit（）{}
ngAfterViewInit（）{
常数计量选项={
图表：{
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['50%，'85%，]，
大小：“140%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：“#EEE”，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
//价值轴
亚克斯：{
停止：[
[0.1，#55BF3B']，//绿色
[0.5，#DDDF0D']，//黄色
[0.9，#DF5353']//红色
],
线宽：0，
minorTickInterval:null，
金额：2，
分:0,，
最高：200，
标题：{
y:-70，
文字：“速度”
},
标签：{
y:16
}
},
打印选项：{
solidgauge：{
数据标签：{
y:5，
边框宽度：0，
useHTML:true
}
}
},
学分：{
已启用：false
},
系列：[
{
名称：“速度”，
数据：[80]，
数据标签：{
格式：
“{y}
”+
“公里/小时”
},
工具提示：{
valueSuffix:'公里/小时'
}
}
]
};
this.chart=图表（this.chartTarget.nativeElement，gaugeOptions）；
}
}

因此，我已经做了一些调查，如何添加更多的高图表，但没有找到解决方案。我发现：

• npm安装highcharts more但它已被弃用，因此我没有使用它
• 从“highcharts/highcharts more”导入*作为highcharts更多TS错误“node_modules/@types/highcharts/highcharts more”解析为非模块实体，无法使用此构造导入。
• 从“highcharts”导入*作为highcharts更多TS高图表错误更多（高图表）；无法调用其类型缺少调用签名的表达式。类型“Static”没有兼容的呼叫签名。
• highcharts angular没有使用它，因为angular 6出现问题

---

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

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

---

要使用

固体仪表

系列类型，首先需要导入相应的模块

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

solidGauge(Highcharts)

---

我将solidGauge与Angular 6一起使用，需要删除HighCharts的所有“requires”语句。经过一番苦思冥想后，我把这个应用于更复杂的图表。 诀窍是将.src添加到导致错误的导入中。
这是一个工作示例：

在模块中：

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
                    }]
                }]
            }

        }
    }

从'@angular/core'导入{Component，OnInit，Input，ViewChild，ElementRef}；
从“highcharts”导入{chart}；
出口级计量数据{
公共宽度：数字；
构造函数（公共标题：字符串，公共值：数字，公共颜色：字符串）{}
}
@组成部分({
选择器：“radialgauge”，
模板：`
`
})
导出类仪表组件{
@ViewChild（'chartTarget'）chartTarget:ElementRef；
@输入（）数据：计量数据；
公共数据：计量数据；
公共选择：目标；
公共图表宽度：数字=250；
公共图表高度：数字=200；
公共topmargin：数字=50；
公共中心：字符串[]=['50%，'50%'；
chart1:Highcharts.ChartObject；
构造函数（）{
this.thisdata=新计量数据（“”，0，#000’）
};
ngOnChanges（）{
this.thisdata=this.data；
this.setOptions（this.thisdata）；
this.chart1=图表（this.chartTarget.nativeElement，this.options）；
}
恩戈尼尼特（）{
this.thisdata=this.data；
this.chartwidth=this.width；
如果（此高度）{
this.chartheight=this.height；
}
如果（！this.showtitle）{
this.thisdata.title=''；
这个.topmargin=0；
this.center=['30%，'55%']；
}
this.setOptions（this.thisdata）；
this.chart1=图表（this.chartTarget.nativeElement，this.options）；
}
设置选项（新数据：GaugeData）{
此选项={
图表：{
类型：“solidgauge”，
破坏