HighChartsDate Picker与系列图表

HighChartsDate Picker With Series Chart

本文关键字：系列 Picker HighChartsDate      更新时间：2023-09-26

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

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
        }]
     }

我试过调用dateObject本身像datepickerStart.dateObject，但这似乎不工作。我缺乏javascript知识是显而易见的。如有任何帮助，不胜感激。

您可以通过在axis上调用setextrees来实现range选择器。

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

相关文章：