使datepicker与highcharts一起使用

Question

我已经在我的rails 3应用程序中实现了一个高图,我正在尝试进一步扩展它,以便它附加一个高图.我尝试这样做的目的是让用户可以选择特定日期,它将加载该选定日期的数据.我搜索并找到类似于我想要实现的东西http://jsfiddle.net/E8WQ5/8/

在这里你有正常的基本highstock图表基本股票图表.我想要做的是用datepicker替换范围选择器.这是否可行,如果可行,我该怎么做呢？我已经按照示例(我提供的第一个链接)并实现了datepicker.我现在正在努力做的是让datepicker实际上与highcharts一起使用.我对javascript的了解并不是最高的,所以很抱歉看似简单的问题.

我正在努力解决的问题是用日期选择器替换日期范围选择器.

Answer 1

您应该更改 datepicker onselect 事件处理程序

onSelect: function( selectedDate ) {
    var option = this.id == "from" ? "minDate" : "maxDate",
    instance = $( this ).data( "datepicker" ),
    date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat,
         selectedDate, instance.settings );
    dates.not( this ).datepicker( "option", option, date );
}

对此：

onSelect: function( selectedDate ) {
    var option = this.id == "from" ? "minDate" : "maxDate",
    instance = $( this ).data( "datepicker" ),
    date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat,
         selectedDate, instance.settings );
    dates.not( this ).datepicker( "option", option, date );

    var startDate=$("#from")[0].value;
    var endDate=$("#to")[0].value;
    if (startDate!=="" && endDate!=="") {
        startDate=startDate.split("/");
        endDate=endDate.split("/");
        chart.xAxis[0].setExtremes(
            Date.UTC(startDate[2], startDate[0]-1, startDate[1]),
            Date.UTC(endDate[2], endDate[0]-1, endDate[1])
        );
    }
}

这只是一个概念证明，仅当两个输入字段有值时才会更新缩放，而不检查它是否是有效日期。

如果仅填充了一个字段，您也可以使用Chart.xAxis[0].getExtremes()来更改缩放。

我对 Jquery 不太了解（我习惯了 Mootools），并且对 datepicker 组件一无所知，也许有一种更优雅的方法来获取间隔，但这取决于你，不要依赖在高斯托克。