Question

有没有一种方法可以覆盖高图中的重置缩放按钮单击事件？单击重置缩放按钮时，我希望图表使用setExtremes显示特定间隔，而不是缩小整个图表。

Answer 1

您可以在图表对象的selection属性中捕获它。只需在要缩放的位置使用setExtremes()函数，并且将超时设置为0ms，以便图形的“重置图形”功能不会覆盖它。

chart: {
   events: {
      selection: function(event) {
         if (!event.xAxis) {
            setTimeout(function(){chart.xAxis[0].setExtremes(0, 5)}, 0);
         }
      }
    ...
  }

工作示例：http://jsfiddle.net/rhavelka/M7cfm/64/

编辑：，但请确保您要放大该特定时间间隔并从本质上向用户隐藏数据（除非您在图形上有一个example这样的滚动条）< / p>

Answer 2

您可以覆盖默认Chart.prototype.showResetZoom并在zoomOut函数中提供自己的逻辑：

(function(H) {
  H.Chart.prototype.showResetZoom = function() {

    var chart = this,
        defaultOptions = H.defaultOptions,
      fireEvent = H.fireEvent,
      lang = defaultOptions.lang,
      btnOptions = chart.options.chart.resetZoomButton,
      theme = btnOptions.theme,
      states = theme.states,
      alignTo = btnOptions.relativeTo === 'chart' ? null : 'plotBox';

    function zoomOut() {
      //chart.zoomOut(); // default action
      chart.xAxis[0].setExtremes(3, 7); // new action
    }

    fireEvent(this, 'beforeShowResetZoom', null, function() {
      chart.resetZoomButton = chart.renderer.button(
          lang.resetZoom,
          null,
          null,
          zoomOut,
          theme,
          states && states.hover
        )
        .attr({
          align: btnOptions.position.align,
          title: lang.resetZoomTitle
        })
        .addClass('highcharts-reset-zoom')
        .add()
        .align(btnOptions.position, false, alignTo);
    });
  }

})(Highcharts);

实时演示： http://jsfiddle.net/BlackLabel/ay0t2e9f/

文档参考： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

高图表如何覆盖重置缩放按钮事件

2 个答案: