angular2-highcharts Highcharts 导出模块

Question

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

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

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

Answer 1

从 Angular 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 { }

早期版本的旧答案：

如果你使用 angular-cli (webpack) 和 angular2-highcharts，这对我有用：

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

Answer 2

创建一个指令，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();
        }
    }
}