如何使用 Angular 6 中的 Highcharts 创建实心仪表图？

Question

我想在角度 6 的 highcharts 中创建一个实心量规图表。我尝试使用其他图表，它工作正常，但量规图表不工作。我已经导入了插件，但它无法找到类型chart.Here 是下面的代码，我也在这个链接https://stackblitz.com/edit/angular-yw3xwa?file=src%2Fapp%2Fapp.module.ts 中创建了一个演示。

app.component.html

<div #referenceKeyName (click)="onClickMe(referenceKeyName)" id="chart2"></div>

app.module

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

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

Answer 1

你犯了一个简单的错字。实心量规系列被称为solidgauge 而不是solidGauge。

chart: {
  'type': 'solidgauge'
}

演示：

• https://stackblitz.com/edit/angular-elp56k?file=src/app/app.component.ts