如何在Highstock rangeSelector中使用datepiker,角度为2

时间:2017-05-24 01:31:59

标签: angular highcharts highstock jstockchart

请参阅此示例a link!我想使用date piker选择日期的标记。

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

这是使用带有java脚本a link的datepiker的相同示例!

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

0 个答案:

没有答案