与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

我能够通过访问轴对象，以即时更新的图表显示的配置。