带有 angular2 和 SystemJS 设置的 Highcharts

Question

很难让 ng2-highcharts 和 angular2 很好地协同工作。

我有的是;

import * as Highcharts from 'highcharts';
window['Highcharts'] = Highcharts;  
bootstrap(AppComponent);

SystemJS 配置；

  map: {
    "highcharts": "node_modules/highcharts/highcharts.js",
    "ng2-highcharts": "node_modules/ng2-highcharts",

  }

正如您所看到的，这是一个很好的 hack，但这是我让它工作的唯一方法 - 当我删除手动 window 分配时，我得到

ReferenceError: Highcharts is not defined
    at Ng2Highcharts.Object.defineProperty.set

所以我的问题是，肯定有更好的方法吗？有什么想法吗？

我是这样用的；

import { Component, OnInit } from 'angular2/core';
import { Ng2Highcharts } from 'ng2-highcharts/ng2-highcharts';

@Component({
    selector: 'component',
    styleUrls: ['.comp.css'],
    templateUrl: '.comp.html',
    directives: [Ng2Highcharts]
})

谢谢

Answer 1

我稍微修改了几个月前检索到的 ng2-highcharts 的原始实现以解决一些问题（我不得不使用 jQuery - 可能最新版本的软件包不需要任何 twick 任何更多的）。无论如何，这是我使用的指令的代码

/// <reference path="../../typings/highcharts/highcharts.d.ts" />

declare var jQuery: any;

import {Directive, ElementRef, Input} from 'angular2/core';

@Directive({
    selector: '[ng2-highcharts]'
})
export class Ng2Highcharts {
    hostElement: ElementRef;
    chart: 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) {
            let nativeEl = this.hostElement.nativeElement;
            let jQ = jQuery(nativeEl);
            this.chart = jQ.highcharts(opt);
        } else {
            console.log('No valid options...');
            console.dir(opt);
        }
    }
}

在index.html我有

System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          ng2Highcharts: {
            format: 'register',
            defaultExtension: 'js'
          },
.....
.....
}})

和

<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/highcharts/highstock.js"></script>
<script src="./lib/highcharts/modules/exporting.js"></script>
<script src="./lib/highcharts/highcharts-more.js"></script>

在需要使用指令的组件中，html 代码如下所示：

<div [ng2-highcharts]="chartOptions"></div>

图表选项是用这样的代码创建的

createNewchartOptions() {
        return {
            title: {text: "Performance vs Benchmark (" + this.periodText + ")"},
            rangeSelector: {
                selected: 4},
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';}
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'}]
            },
            plotOptions: {
                series: {
                    compare: 'percent'}
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2}
        };
    }

您需要做的最后一件事是在 chartOptions 中设置 series（我没有放置代码，因为太链接到我的应用程序）。

希望对您有所帮助

带有 angular2 和 SystemJS 设置的 Highcharts

Highcharts with angular2 and SystemJS Setup

highcharts

highcharts-ng

systemjs

jspm

angular