如何在 angular 6 中使用打字稿使用 Highcharts Solid Gauge？

Question

在我当前的项目中，我使用 Angular 6 和打字稿。我的计划是在我的一个组件上使用 Solidgauge。我在制作过程中运行遇到了以下问题：

当我尝试在我的显示器上显示仪表时，没有任何显示，并且在控制台 Highcharts 中显示错误 #17。我怀疑我的问题的原因在于我在我的组件中导入 Highcharts-more 的方式。

我的thoughput.component.ts文件

import { Component, OnInit, OnDestroy, Input} from '@angular/core';
import { UsageService } from '../../services/UsageService';
import { Subscription } from 'rxjs';
import * as Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/exporting';
import * as more from 'highcharts-more/more';
import * as solidgauge from 'highcharts/modules/solid-gauge';
more(Highcharts);

@Component({
  selector: 'app-throughput',
  templateUrl: './throughput.component.html',
  styleUrls: ['./throughput.component.css'],
})

export class ThroughputComponent implements OnInit, OnDestroy {
  // private updataDataEndRef: Subscription = null;
  public messageCount: number;
  public chart: any;
 // @Input() usageService: UsageService;

 constructor() {
   this.messageCount = 0;
 }

 ngOnInit(): void {
   this.initChart(this.buildGauge());
 }

 ngOnDestroy() {
   // this.updataDataEndRef.unsubscribe();
 }

 // noinspection JSMethodCanBeStatic
 private buildGauge(): any {
    return {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) 
        || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
       }
    },
    tooltip: {
      enabled: false
    },
    yAxis: {
      stops: [
        [0.1, '#55BF3B'],
        [0.5, '#DDDF0D'],
        [0.9, '#DF5353']
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };
}

private initChart(gaugeOptions: any) {
  this.chart = Highcharts.chart('gauge-container', 
              Highcharts.merge(gaugeOptions, {
   yAxis: {
     min: 0,
     max: 200,
     title: {
       text: 'Speed'
     }
   },
   credits: {
     enabled: false
   },
   series: [{
     name: 'Speed',
     data: [80],
     dataLabels: {
       format: '<div style="text-align:center"><span style="font- 
                   size:25px;color:' +
                   ((Highcharts.theme && Highcharts.theme.contrastTextColor) 
                    || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">km/h</span></div>'
      },
      tooltip: {
        valueSuffix: ' km/h'
      }
    }]
  }));
}

我的thoughput.component.html文件

<div id='gauge-container' style="width: 300px; height: 200px"></div>

我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform- 
         browser/animations';
import { MatCardModule, MatButtonModule, MatGridListModule } from        
       '@angular/material';
import { RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

import { GatewayService } from './services/GatewayService';
import { AppComponent } from './components/app/app.component';
import { GatewayComponent} from './components/gateway/gateway.component';
import { GatewayControlComponent} from 
           './components/gatewaycontrol/gatewaycontrol.component';
import { TopmenuComponent} from './components/topmenu/topmenu.component';
import { SidemenuComponent} from './components/sidemenu/sidemenu.component';
import { GatewayDataDisplayComponent} from 
       './components/gatewaydatadisplay/gatewaydatadisplay.component';
import { ThroughputComponent } from 
       './components/throughputdisplay/throughput.component';

@NgModule({
  declarations: [
     AppComponent,
     GatewayComponent,
     TopmenuComponent,
     SidemenuComponent,
     GatewayControlComponent,
     GatewayDataDisplayComponent,
     ThroughputComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatCardModule,
     MatButtonModule,
     MatGridListModule,
     RouterModule.forRoot([
       { path: '', redirectTo: 'home', pathMatch: 'full' },
       { path: 'home', component: AppComponent },
       { path: 'control', component: GatewayControlComponent},
       { path: 'gateways', component: GatewayComponent },
       { path: '**', redirectTo: 'home' }
     ])
   ],
   providers: [GatewayService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

有人能告诉我我做错了什么吗？还是有什么我忘了做的？

Ps。在我的代码的当前版本中，我尝试使用 npm 分别安装 highcharts-more 和 hightcharts。

Answer 1

包括全部：

highcharts
highcharts-更多
实心规模块

例如：

import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

// Now init modules:
HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);

Answer 2

要扩展并遵循 angular-highcharts 库文档：

// app.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src'
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge'

...
imports: [ ChartModule ],
providers: [
    { 
        provide: HIGHCHARTS_MODULES, 
        useFactory: () => [HighchartsMore, HighchartsSolidGauge] 
    },
]
...

Answer 3

import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge'; 
HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);

上面的代码对我不起作用，但下面的代码对我有用。我有 Angular CLI 版本 9.1.7。

import * as Highcharts from 'highcharts/highcharts';
import HighchartsMore from 'highcharts/highcharts-more.src';
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);

如何在 angular 6 中使用打字稿使用 Highcharts Solid Gauge？

How do I use an Highcharts Solid Gauge in angular 6 with typescript?

javascript

highcharts

gauge

typescript

angular