與Highstocks/Highcharts jQuery日期選擇器

Question

如何獲得帶有highcharts rangeselector的工作jQuery datepicker？

這個小提琴是一個古老的例子（來自高層作家），它有問題。

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

我能夠通過訪問軸對象，以即時更新的圖表顯示的配置。