javascript - 使日期选择器与 highcharts 一起工作

Question

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

这是正常的基本高库存图表 Basic stock chart .我想要做的是用日期选择器替换范围选择器。这是否可行，如果可行，我该怎么做。我遵循了示例(我提供的第一个链接)并实现了日期选择器。我现在正在努力做的是让日期选择器真正与 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)，对日期选择器组件一无所知，也许有更优雅的方法来获取间隔，但这取决于你，不要'取决于 Highstock。