angular2とSystemJSの設定を持つハイチャート

Question

はng2-highchartsとangular2をうまく組み合わせるのに苦労しました。

私は何を持っていますか。

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

SystemJS Config;

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

    } 

あなたが見ることができるように、これは非常にハックですが、私はそれが働いて得ることができ、その唯一の方法 - 、私は手動でウィンドウの割り当てを削除するときは、私は

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

を取得するので、私の質問は確かに良い方法がありますか？何か案は？

私はそれをそう使います。私は少し私はいくつかの問題を克服するために数ヶ月前retreived NG2-highchartsの元の実装を変更した

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

（私はjQueryのを使用していた - おそらくパッケージの最新バージョンを必要としません。どんなツイックでも）。いずれにせよ、このディレクティブのコードは、私が指示に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> 

を持って、私はindex.htmlで

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

を使用しています次のようになります。

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

最終のもののようなコードを使用して作成されていることは（あまりにも私のアプリにリンクされているので、私は、コードを入れていない）chartOptionsでseriesを設定することです。私はこれが正常に動作します確信しているように私はこれが