javascript - 带系列图表的 HighCharts DatePicker

Question

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

http://jsfiddle.net/9dmftmom/

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

我创建了一个 onselect 事件来存储每个对象的日期。但是，我不确定如何让它在 Highcharts 的 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 知识的缺乏显而易见。非常感谢任何帮助。

Answer 1

您可以通过在轴上调用 setExtremes 来实现某种范围选择器。

$('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