この例のリンクを参照してください。デートパイカーを使ってデートのプラージュを選びたいです。
@Component({
selector: 'my-app',
styles: [`
chart {
display: block;
}
`],
template: `<chart type="StockChart" [options]="options"></chart>`
})
class AppComponent {
constructor(private http: Http) {
http.get('https://cdn.rawgit.com/gevgeny/angular2-
highcharts/99c6324d/examples/aapl.json').subscribe(res => {
this.options = {
rangeSelector: {
inputEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1mm'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
title : { text : 'AAPL Stock Price' },
series : [{
name : 'AAPL',
data : res.json(),
tooltip: {
valueDecimals: 2
}
}]
};
});
}
options: Object;
}
そして、これはdatepikerをjava script a linkで使用するのと同じ例です!
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-
c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker();
}, 0);
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function () {
this.onchange();
this.onblur();
}
});
angular2で作業するためにそれを変換する方法