使 datepicker 与 highcharts 一起工作

Question

我在我的 rails 3 应用程序中实现了一个 highchart，并正在尝试进一步扩展它，以便它附加一个 highchart。我为什么要这样做的目的是让用户可以选择一个特定的日期，它会加载该选定日期的数据。我搜索并发现类似于我想要实现的目标http://jsfiddle.net/E8WQ5/8/

这里有正常的基本高位图表Basic stock chart。我想要做的是用日期选择器替换范围选择器。这是否可行，如果可以，我该怎么做。我已经按照示例（我提供的第一个链接）并实施了日期选择器。我现在正在努力做的是让 datepicker 真正与 highcharts 一起工作。我对 javascript 的了解并不是最高的，所以很抱歉这似乎是一个简单的问题。

我正在努力用日期选择器替换日期范围选择器..

Answer 1

您应该更改日期选择器 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 组件一无所知，也许有一种更优雅的方式来获取间隔，但这取决于你和不要'不依赖 Highstock。