angular2-highcharts Highcharts导出模块

问题描述：

如何将导出模块包含到angular2应用程序中？angular2-highcharts Highcharts导出模块

我曾尝试将下面的脚本添加到index.html，但没有任何反应。

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

答

创建一个指示，HighchartsExporting，例如这里是一个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(); 
     } 
    } 
}

我想这根本不回答这个问题 - 这只是显示如何包含高图 – Leonya

答

由于角CLI 1.0 RC.1和最新angular2-highcharts，这是为我工作（见也是这个正在进行的讨论为推荐的解决方案https://github.com/gevgeny/angular2-highcharts/issues/156）：

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

在typings.d.ts补充：declare var require: any;

然后在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 { }

老答案早期版本：

如果使用角CLI（的WebPack）和angular2-highcharts，这个工作对我来说：

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

实际上只需要：require（'highcharts/modules/exporting'） –

angular2-highcharts Highcharts导出模块

相关推荐