jQuery datepicker with Highstocks/Highcharts

Question

highcharts rangeselectorを使用して作業するjQueryの日付ピッカーを取得するにはどうすればよいですか？

このフィドルは、問題を抱えている（ハイチャートの著者からの）古い例です。

http://jsfiddle.net/BWEm5/

終了日を変更すると、データの先頭に開始日をリセットします。

$(function() { 

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 
     // Create the chart 
     window.chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container' 
      }, 

      rangeSelector: { 
       selected: 1, 
       inputDateFormat: '%Y-%m-%d' 
      }, 

      title: { 
       text: 'AAPL Stock Price' 
      }, 

      series: [{ 
       name: 'AAPL', 
       data: data, 
       tooltip: { 
        valueDecimals: 2 
       }}] 

     }, function(chart) { 

      // apply the date pickers 
      setTimeout(function() { 
       $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker() 
      }, 0) 
     }); 
    }); 


    // Set the datepicker's date format 
    $.datepicker.setDefaults({ 
     dateFormat: 'yy-mm-dd', 
     onSelect: function(dateText) { 
      this.onchange(); 
      this.onblur(); 
     } 
    }); 

}); 

Answer 1

日付が選択されると、onSelectイベントを使用してthis.onchange（）を削除して極端な値を設定できます。

$.datepicker.setDefaults({ 
     dateFormat: 'yy-mm-dd', 
     onSelect: function(dateText) { 
      chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime()); 
      //this.onchange(); 
      this.onblur(); 
     } 
    }); 

例：

http://jsfiddle.net/BWEm5/542/

Answer 2

おそらくこれは私は軸オブジェクトにアクセスすることによって、オンザフライで表示されるグラフの構成を更新することができる

Change range in Highstock dynamically

助けます。