eckig2-highcharts Highcharts exportierendes Modul

Question

Wie schließe ich das Exportmodul in eine angular2-App ein?

Ich habe versucht, das folgende Skript zur index.html hinzuzufügen, aber nichts passiert. Erstellen

<script src="http://code.highcharts.com/modules/exporting.js"></script> 

Answer 1

eine Richtlinie, HighchartsExporting, zum Beispiel hier ist ein für Highcharts:

import {Directive, ElementRef, Input, OnDestroy} from '@angular/core'; 

@Directive({ 
    selector: '[ng2-highcharts]', 
    exportAs: 'ng2Highcharts' 
}) 
export class Ng2Highcharts implements OnDestroy { 
    hostElement: ElementRef; 
    pChart: HighchartsChartObject; 
    constructor(ele: ElementRef) { 
     this.hostElement = ele; 
    } 

    @Input('ng2-highcharts') set options(opt: HighchartsOptions) { 
     if (!opt) { 
      console.log('No valid options...'); 
      console.log(opt); 
      return; 
     } 
     if (opt.series || opt.data) { 
      if (this.pChart) { 
       this.pChart.destroy(); 
      } 
      if (!opt.chart) { 
       opt.chart = {}; 
      } 
      opt.chart.renderTo = this.hostElement.nativeElement; 
      this.pChart = new Highcharts.Chart(opt); 
     } else { 
      console.log('No valid options...'); 
      console.dir(opt); 
     } 
    } 


    public get chart() : HighchartsChartObject { 
     return this.pChart; 
    } 

    ngOnDestroy() { 
     if (this.pChart) { 
      this.pChart.destroy(); 
     } 
    } 
} 

Answer 2

Ab Angular CLI 1.0-RC.1 und aktuelles angular2-highcharts, das für mich arbeitet (siehe auch dies die laufende Diskussion für die empfohlene Lösung https://github.com/gevgeny/angular2-highcharts/issues/156):

npm install --save angular2-highcharts 
npm install --save @types/highcharts 

In typings.d.ts hinzufügen: declare var require: any;

Dann in app.module.ts:

import { ChartModule } from 'angular2-highcharts'; 
import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService'; 
export function highchartsFactory() { 
    var hc = require('highcharts'); 
    var hcm = require('highcharts/highcharts-more'); 
    var exp = require('highcharts/modules/exporting'); 

    hcm(hc); 
    exp(hc); 
    return hc; 
} 

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

Alte Antwort für frühere Version:

Wenn Sie Winkel cli (webpack) und angular2-highcharts, das ist für mich gearbeitet:

import {Highcharts} from 'angular2-highcharts'; 
require('highcharts/modules/exporting')(Highcharts);