javascript - HighCharts DatePicker系列图

我正在尝试使用带有HighCharts系列图表的jquery datepicker。到目前为止，我已经使datepicker的开始日期和结束日期小部件正常工作，但是我在范围选择的实际实现方面遇到了麻烦。

http://jsfiddle.net/9dmftmom/

$( "#datepickerStart, #datepickerEnd" ).datepicker({
    onSelect: function() {
        var dateObject = $(this).datepicker('getDate');
    }
});

我创建了一个onselect事件来存储每个对象的日期。但是，我不确定如何使它在高图表的y轴设置中动态更新。

yAxis: {
         type: 'datetime',
         min: [INSERT START DATE HERE],
         max: [INSERT END DATE HERE],
         title: {
             text: 'Timespan'
         },
         step: 1,
         plotLines: [{
            color: '#000000',
            width: 4,
            value: Date.UTC(2015, 09, 01, 18, 0, 0),
            zIndex: 5
        }]
     }

我试过像datepickerStart.dateObject这样调用dateObject本身，但这似乎不起作用。我对JavaScript的了解不足清楚地表明了这一点。任何帮助是极大的赞赏。

最佳答案

您可以通过在轴上调用setExtremes来实现一种rangeselector。

$('input[name="crange"]').click(function () {
        var chart = $('#container').highcharts(),
            xAxis = chart.xAxis[0],
            extremes = xAxis.getExtremes(),
            index = parseFloat($(this).val()),
            range;

        switch (index) {
            case 0: //week
                range = 7 * 24 * 3600 * 1000; //7 days
                break;
            case 1:
                range = 31 * 24 * 3600 * 1000; //31 days
                break;
            case 2:
                 range = 3 * 31 * 24 * 3600 * 1000; //quark days
                break;
            case 3: //year
                 range = 365 * 24 * 3600 * 1000; //1 year
                break;
        }

        xAxis.setExtremes(extremes.max - range, extremes.max);
    });

示例：jsfiddle.net/hdt9yqff/2