如何禁用Highcharts中setExtremes事件触发后的Redraw事件？

嘿，我刚好踩过这个坑！Highcharts里哪怕开了liveRedraw: false，导航器mouseup触发setExtremes后还是会自动执行redraw，而且同步的redraw会直接阻塞UI，导致你在回调里加的加载器根本没机会渲染出来。下面给你两个关键解决思路和代码示例：

1. 精准阻止导航器触发的自动Redraw #

你可以在setExtremes回调里用event.preventDefault()拦截默认的redraw行为，但记得只针对导航器触发的场景，避免影响其他手动调用setExtremes的逻辑：

Highcharts.chart('container', {
  xAxis: {
    events: {
      setExtremes: function(e) {
        // 只拦截导航器触发的setExtremes事件
        if (e.trigger === 'navigator') {
          // 阻止默认的redraw执行
          e.preventDefault();
          
          // 立刻显示加载器
          this.chart.showLoading();
          
          // 把redraw和数据处理逻辑放到异步队列，给浏览器留时间渲染加载器
          setTimeout(() => {
            // 👉 这里可以插入你的自定义逻辑：比如请求新数据、处理极值范围等
            
            // 手动设置极值并触发redraw（最后一个参数true表示触发redraw）
            this.setExtremes(e.min, e.max, true);
            
            // redraw完成后隐藏加载器
            this.chart.hideLoading();
          }, 0);
        }
      }
    }
  },
  navigator: {
    liveRedraw: false // 保持这个配置，减少拖拽过程中的无效redraw
  },
  // 其他图表配置项...
});

2. 加载器不显示的核心原因 #

之前你的加载器看不到，是因为setExtremes回调和默认redraw都是同步执行的——浏览器会先跑完所有同步代码（包括redraw的大量绘制逻辑），才会去更新UI渲染加载器。用setTimeout把redraw逻辑丢到异步队列后，浏览器会先渲染加载器，再执行后续的redraw操作，这样加载器就能正常显示了。

额外提示（不推荐全局修改） #

如果你需要完全禁用所有setExtremes后的自动redraw，也可以全局重写Highcharts的方法，但这种方式容易影响其他功能，谨慎使用：

// 重写Axis的setExtremes方法，默认不触发redraw
Highcharts.Axis.prototype.setExtremes = function(min, max, redraw, animation) {
  // 调用原始方法，但默认将redraw设为false
  Highcharts.Axis.prototype.setExtremes.call(this, min, max, redraw || false, animation);
};

内容的提问来源于stack exchange，提问作者Vishal Bhalla