angular - 在角度 6 中的 Highcharts 的 guagechart 中出现一些错误

问题描述

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

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

标签： angulartypescripthighcharts

angular - 在角度 6 中的 Highcharts 的 guagechart 中出现一些错误

问题描述

app.component.ts

app.component.html

app.module.ts

解决方案

推荐阅读