Question

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

我想我必须使用.rangeSelector.buttons对象中的chart，但我无法弄明白。如果有人尝试了类似的东西，我很高兴你能和我分享你的方法。

如果我可以使用这些自己的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

将事件添加到按钮，这些按钮将在导航器x轴中设置极值（请参阅Axis.setExtremes）（可选地，您可以设置数据分组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/

在<div>中定位图表区域外的Highstock Zoom按钮

1 个答案: