Echtzeit-Diagramm mit angular2-highcharts

Question

Ich möchte Echtzeit-Diagramm in meine angular2-Anwendung einfügen, ich benutze angular2-highcharts.

npm install angular2-highcharts --save 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
    title = 'app works!'; 
    options: Object; 
    constructor() { 
    this.options = { 
     title : { text : 'simple chart' }, 
     series: [{ 
     data: [29.9, 71.5, 106.4, 129.2], 
     }] 
    }; 
    } 

} 

app.component.html

<chart [options]="options"></chart> 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import {ChartModule} from "angular2-highcharts"; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule,ChartModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Ich habe diesen Fehler, wenn läuft meine angular2 Anwendung: "Kein Provider für HighchartsStatic!". Vielen Dank im Voraus.

Answer 1

Sie müssen ChartModule.forRoot() in Ihren Importen verwenden:

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ChartModule.forRoot(require('highcharts')) // <-- HERE 
    ], 
    // ... 
}) 
export class AppModule { } 

Answer 2

import { ChartModule } from 'angular2-highcharts'; 
import * as something from 'highcharts'; 

@NgModule({ 
    declarations: [ 
    AppComponent], 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ChartModule.forRoot(something).ngModule 
], 
providers: [ChartModule.forRoot(something).providers], 
bootstrap: [AppComponent] 
}) 

Answer 3

ich in genau dieses Problem lief. This solution von matthiaskomarek hat den Trick für mich:

import { ChartModule } from 'angular2-highcharts'; 
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; 

declare var require: any; 
export function highchartsFactory() { 
    return require('highcharts'); 
} 

@NgModule({ 
    imports: [ 
     ChartModule 
    ], 
    declarations: [ AppComponent ], 
    exports: [], 
    providers: [ 
    { 
     provide: HighchartsStatic, 
     useFactory: highchartsFactory 
    }, 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule 

Ich bin nicht sicher, warum diese Frage unten wurde gewählt, weil es wirklich ein Problem. Ich laufe genau das Gleiche hier an!

Die Highchart-Dokumentation, so wie sie steht, legt nahe, dass ChartModule.forRoot(require('highcharts') alles ist, was erforderlich ist (natürlich das fehlende ) in der Dokumentation ausfüllen). Mit angular-cli-Projekten kann ich nie require zur Arbeit bekommen, also macht declare var require: any; normalerweise den Trick. Mit Ausnahme von forRoot scheint dies zu folgendem Ergebnis zu führen:

FEHLER im Fehler beim statischen Auflösen der Symbolwerte. Referenz auf ein lokales (nicht exportiertes) Symbol 'require'. Betrachten Sie das Symbol Export (Position 18.14 in der ursprünglichen .ts-Datei), Lösung Symbol AppModule in ... app/app.module.ts

Meine Vermutung ist, dass matthiaskomarek ‚s Abhilfe dies vermeidet.

Answer 4

Eine andere Lösung, wenn Marc Brazeau Fix nicht für Sie arbeiten (es hat für mich nicht) ist folgendes zu tun:

import {ChartModule} from 'angular2-highcharts'; 
import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService'; 
import * as highcharts from 'highcharts'; 

@NgModule({ 
    declarations: [AppComponent], 
    imports: [ChartModule], 
    providers: [ 
    { 
     provide: HighchartsStatic, 
     useValue: highcharts 
    }], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Answer 5

schließlich dafür bekam Lösung, überprüfen Sie meineapp.moduleDatei :

import { BrowserModule } from '@angular/platform-browser'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MaterialModule } from '@angular/material'; 
import 'hammerjs'; 
import { ChartModule } from 'angular2-highcharts'; 
import * as highcharts from 'highcharts'; 
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; 

import { AppRouting } from './app.routing'; 
import { AppComponent } from './app.component'; 

declare var require: any; 


export function highchartsFactory() { 
     const hc = require('highcharts'); 
     const dd = require('highcharts/modules/drilldown'); 
     dd(hc); 

     return hc; 
} 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRouting, 
    BrowserAnimationsModule, 
    MaterialModule, 
    ChartModule 
    ], 
    providers: [{ 
     provide: HighchartsStatic, 
     useFactory: highchartsFactory 
    }], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }