Заставьте datepicker работать с высокими чартами

Question

В мое приложение rails 3 встроена старшая диаграмма, и я пытаюсь расширить ее так, чтобы к ней была прикреплена старшая диаграмма. Цель, по которой я пытаюсь это сделать, состоит в том, чтобы пользователь мог выбрать конкретную дату и загрузить данные для этой выбранной даты. Я искал и нашел нечто похожее на то, чего я пытаюсь достичь http://jsfiddle.net/E8WQ5/8/

Здесь у вас есть нормальный базовый график Highstock Базовый график акций . То, что я пытаюсь сделать, это заменить селектор диапазона на указатель даты. Возможно ли это, и если да, то как мне поступить? Я следовал примеру (первая ссылка, которую я предоставил) и реализовал средство выбора даты. То, что я сейчас изо всех сил пытаюсь сделать, это заставить DatePicker на самом деле работать с высокими графиками. Мои знания по javascript не самые высокие, поэтому извините за то, что может показаться простым вопросом.

Все, с чем я борюсь, это замена селектора диапазона дат на средство выбора даты.

Answer 1

Вы должны изменить обработчик события onselect для DatePicker

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, и, возможно, есть более элегантный способ получить интервал, но это зависит от вас не зависит от Хайстока.