如何在Angular2中使用烛台高图？

Question

我正在寻找使用Angular2的Highcharts（highcharts.com）CandleSticks示例。 任何人都可以解释或提供有关如何在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
                    }
                }]
            };

        });


}