Angular2でcandlestick highchartを使用するには？

Question

私はAngchart2でHighcharts（highcharts.com）CandleSticksの例を探しています。 誰でも説明したり、typescriptでAngular2 RCで使用する方法のサンプルを提供できますか？ここで

乾杯 Sanket

Answer 1

import { Component } from '@angular/core'; 
import {JSONP_PROVIDERS, Jsonp} from '@angular/http'; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 


@Component({ 
    selector: 'high-chart', 
    directives: [CHART_DIRECTIVES], 
    providers: [JSONP_PROVIDERS], 
    template: ` 
    <h2> This is HighChart CandleStick component </h2> 

     <chart type="StockChart" [options]="options3"></chart> 
    ` 
}) 

export class HighChartsComponent { 

    options3: Object; 

    constructor(jsonp : Jsonp) { 

     jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => { 
      this.options3 = { 
       title : { text : 'CandleSticks' }, 
       rangeSelector : { 
        selected : 1 
       }, 
       series : [{ 
        type : 'candlestick', 
        name : 'CandleSticks', 
        data : res.json(), 
        dataGrouping : { 
        units : [ 
         [ 
          'week', // unit name 
          [1] // allowed multiples 
         ], [ 
          'month', 
          [1, 2, 3, 4, 6] 
         ] 
        ] 
       }, 
        tooltip: { 
         valueDecimals: 2 
        } 
       }] 
      }; 

     }); 


}