Javascript highcharts如何覆盖重置缩放按钮事件

是否有方法覆盖highcharts中的重置缩放按钮单击事件？单击“重置缩放”按钮时，我希望图表使用SetExtrems显示特定间隔，而不是缩小整个图表

您可以在图表对象的selection属性中捕获它。只需在要缩放的位置使用setExtremesfunction，并设置0毫秒的超时时间，以便图形的“重置图形”功能不会覆盖它

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

工作示例：

编辑：但请确保您希望放大该特定间隔，并从本质上隐藏用户的数据，除非图形上有这样的滚动条

您可以覆盖默认的Chart.prototype.showretzoom并在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);

现场演示：

文件参考：