将Highstock缩放按钮定位在<div>

Question

I have read the configuration options on Highstock charts but couldn't find anything concerning the position of the Zoom Buttons outside the chart area or using own buttons for this purpose.

I guess I have to use the .rangeSelector.buttons in the chart object, but I can't figure it out. If somebody has tried something similar I would be very glad if you could share your approach with me.

The best would be if I could use the zoom functions with these own Bootstrap buttons:

<div style="width: 100%; display: inline-block;"> 
   <button href="#" type="button" class="btn btn-xs btn-outline btn-primary active">12h</button>
   <button href="#" type="button" class="btn btn-xs btn-outline btn-primary">2d</button>
   <button href="#" type="button" class="btn btn-xs btn-outline btn-primary">1w</button>
   <button href="#" type="button" class="btn btn-xs btn-outline btn-primary">1m</button>
   <button href="#" type="button" class="btn btn-xs btn-outline btn-primary">All</button>
</div>

Answer 1

Add events to buttons which will set extremes (see Axis.setExtremes ) in the navigator x axis (optionally, you can set data grouping Axis.setDataGrouping() .

$('#all').on('click', function() {
  var chart = Highcharts.charts[0];
  chart.xAxis[0].setExtremes(chart.xAxis[1].min, chart.xAxis[1].max);
});

$('#20d').on('click', function() {
  var chart = Highcharts.charts[0],
    max = chart.xAxis[0].max,
    interval = 3600 * 1000 * 24 * 20;

  chart.xAxis[0].setExtremes(max - interval, max);
});

example: http://jsfiddle.net/gyrv1qxp/1/