在角度6的Highcharts的guagechart中出错

Question

我在highchaarts中有一个指针图，可以正常工作。但是当我使用命令进行编译时，它显示了很多错误。这是我所附的错误。此代码在https://stackblitz.com/edit/angular-elp56k?file=src/app/app.component.ts中实现。 可以正常工作，但是当我下载代码并在系统上运行时，出现错误。 有人可以帮我吗？

app.component.ts

declare var require: any;
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
const HighchartsMore = require("highcharts/highcharts-more.src");
HighchartsMore(Highcharts);
const HC_solid_gauge = require("highcharts/modules/solid-gauge.src");
HC_solid_gauge(Highcharts);
import * as Exporting from 'highcharts/modules/exporting';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  clickMessage = '';
  name = 'Angular';
  onClickMe(referenceKeyName) {
  alert(referenceKeyName.id);
}
  ngOnInit(){
  this.chartFunc('chart2');
  }
  chartFunc(chartId){
  Highcharts.chart(chartId,{
   chart: {
         'type': 'solidgauge'
      },
      title: {
         text: "Monthly Average Temperature"
      },
     'pane': {
          'center': ['50%', '50%'],
          'size': '300px',
          'startAngle': 0,
          'endAngle': 360,
          'background': {
            'backgroundColor': '#EEE',
            'innerRadius': '90%',
            'outerRadius': '100%',
            'borderWidth': 0
          }
        },
        'yAxis': {
          'min': 0,
          'max': 100,
          'labels': {
            'enabled': false
          },

          'lineWidth': 0,
          'minorTickInterval': null,
          'tickPixelInterval': 400,
          'tickWidth': 0
        },
        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },
      'series': [{
            'name': 'Speed',
            'data': [50],
            'dataLabels': {
                'enabled': false
            }
        }]
   });
}
}

app.component.html

   <hello name="{{ name }}"></hello>
    <div  id="chart2"></div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HighchartsChartModule } from "highcharts-angular";
@NgModule({
  imports:      [ BrowserModule, FormsModule,HighchartsChartModule
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 1

我已在此修复此问题，我添加了'type'：未定义，用窗格替换为窗格：{         中心：['50％'，'50％']，         startAngle：0，         尺寸：“ 80px”，         endAngle：-360，         背景： [{             outsideRadius：“ 92％”         }，{             innerRadius：“ 100％”         }，         {             borderWidth：0         }         ]     }，并更改了样式，这是链接https://stackblitz.com/edit/angular-dlyq3b