Question

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

$( "#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知识显而易见。非常感谢任何帮助。

Answer 1

您可以通过在轴上调用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

HighChartsDate Picker与系列图表

1 个答案: