Получение некоторой ошибки в guagechart Highcharts в angular 6 - PullRequest
0 голосов
/ 24 мая 2019

У меня есть диаграмма в старших диаграммах, которая работает нормально. Но когда я компилирую с командой, она показывает много ошибок. Вот ошибка, которую я прикрепил ниже. Этот код реализован здесь https://stackblitz.com/edit/angular-elp56k?file=src/app/app.component.ts.H enter image description 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 { }

1 Ответ

0 голосов
/ 25 мая 2019

Я исправил эту проблему здесь, я добавил 'type': undefined, последовательно заменил панель на панель: { центр: ['50% ', '50%'], startAngle: 0, размер: '80px', endAngle: -360, фон: [{ externalRadius: '92% ' }, { innerRadius: «100%» }, { borderWidth: 0 } ] }, и изменил стиль, вот ссылка https://stackblitz.com/edit/angular-dlyq3b

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...