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",

  }

正如你所看到的，这是一个非常黑客，但它是我能让它工作的唯一方法 - 当我删除手动窗口分配时，我得到了

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>

chartOptions是使用类似

的代码创建的

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}
        };
    }

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

我希望这会有所帮助

带有angular2和SystemJS设置的Highcharts

1 个答案: