Highcharts mit angular2 und SystemJS Setup

Question

hatten eine harte Zeit zu versuchen, ng2-highcharts und angular2 gut zusammen zu arbeiten.

was ich habe ist;

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

SystemJS Konfig;

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

    } 

wie Sie sehen können, ist dies ein ganz Hack, aber es ist der einzige Weg, ich es Arbeit bekommen konnte - wenn ich die manuelle Fensterzuordnung zu löschen, erhalte ich

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

Also meine Frage ist, Sicher gibt es einen besseren Weg? Irgendwelche Ideen?

Ich verwende es so;

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

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

Dank

Answer 1

ich leicht die ursprüngliche Implementierung von NG2-highcharts geändert habe ich vor einigen Monaten retreived einige Probleme zu überwinden (ich jQuery verwenden hatte - wahrscheinlich die aktuellste Version des Pakets muss nicht irgendein Twick mehr). Auf jeden Fall ist dies der Code der Richtlinie verwende ich

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

In index.html Ich habe

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

und

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

In den Komponenten, die die Richtlinie den HTML-Code verwenden müssen sieht wie folgt aus:

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

chartOptions sind mit Code erstellt wie dieses

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

Letzte, was Sie tun müssen, ist die series im chartOptions (I setzen Code nicht, da meine App verlinkt) einzustellen.

Ich hoffe, das hilft