将 Highstock 缩放按钮定位在 <div> 内的图表区域之外

Question

我已阅读 Highstock 图表上的配置选项，但找不到任何有关图表区域外的缩放按钮位置或为此目的使用自己的按钮的信息。

我想我必须在 chart 对象中使用 .rangeSelector.buttons，但我想不通。如果有人尝试过类似的东西，如果你能与我分享你的方法，我将非常高兴。

如果我可以使用带有这些 Bootstrap 按钮的缩放功能，那就最好了：

<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

向将设置极值的按钮添加事件（参见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);
});

示例：http://jsfiddle.net/gyrv1qxp/1/

将 Highstock 缩放按钮定位在 <div> 内的图表区域之外

Positioning Highstock Zoom Buttons outside the chart area within a <div>

javascript

position

button

zooming

highstock