Question

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

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

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

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组件一无所知，也许有更优雅的方式来获取间隔，但这取决于你并且不要不依赖于Highstock。

使datepicker与highcharts一起使用

1 个答案: