Как использовать твердотельный датчик Highcharts в angular 6 с машинописным шрифтом? - PullRequest
Новая
       20

Как использовать твердотельный датчик Highcharts в angular 6 с машинописным шрифтом?

0 голосов
/ 29 августа 2018

В моем текущем проекте я использую Angular 6 и машинопись. Мой план - использовать Solidgauge на одном из моих компонентов. Во время производства моей компетенции я сталкиваюсь со следующими проблемами:

Когда я пытаюсь отобразить Gauge на моем дисплее, ничего не отображается, и в консоли отображается Highcharts error # 17. Я подозреваю, что причина моей проблемы заключается в том, что я импортирую Highcharts-more в свой компонент.

Мой файл whileput.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'
      }
    }]
  }));
}

Мой файл whileput.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. В текущей версии моего кода я пытался установить highcharts-more и hightcharts отдельно, используя npm.

1 Ответ

0 голосов
/ 29 августа 2018

Включить все:

  • 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);
...