Highcharts 如何在Angular2中使用烛台海图？
我正在寻找Highcharts（Highcharts.com）烛台与Angular2的例子。 有人能解释一下或者提供一个示例，说明如何在Angular2 RC和typescript中使用它吗 干杯 Sanket以下是示例Highcharts 如何在Angular2中使用烛台海图？,highcharts,angular,Highcharts,Angular,我正在寻找Highcharts（Highcharts.com）烛台与Angular2的例子。 有人能解释一下或者提供一个示例，说明如何在Angular2 RC和typescript中使用它吗 干杯 Sanket以下是示例 import { Component } from '@angular/core'; import {JSONP_PROVIDERS, Jsonp} from '@angular/http'; import { CHART_DIRECTIVES } from 'angular2
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
}
}]
};
});
}
从'@angular/core'导入{Component}；
从“@angular/http”导入{JSONP_提供者，JSONP}”；
从“angular2 highcharts”导入{CHART_指令}；
@组成部分({
选择器：'高位图表'，
指令：[图表_指令]，
提供者：[JSONP_提供者]，
模板：`
这是HighChart烛台组件
`
})
导出类HighCharts组件{
选项3：目标；
构造函数（jsonp:jsonp）{
jsonp.request（'https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-json&callback=JSONP_callback'）。订阅（res=>{
此选项3={
标题：{文本：'烛台'}，
范围选择器：{
选定：1
},
系列：[{
键入：“烛台”，
名称：'烛台'，
数据：res.json（），
数据分组：{
单位：[
[
'周'，//单位名称
[1] //允许的倍数
], [
“月”，
[1, 2, 3, 4, 6]
]
]
},
工具提示：{
数值小数：2
}
}]
};
});
}