HighCharts - 如何将导航器的功能与图形分开

Question

在将导航器添加到HighChart图之后，我们如何防止导航器更改图形的运动。
有事件处理程序吗？

我希望导航器在屏幕上，但请禁用图形的功能。

Answer 1

您可以将其覆盖其核心方法。

1）破坏整个功能：

(function(H) {
    H.Navigator.prototype.addMouseEvents = function() {}
})(Highcharts);

演示：

• https://jsfiddle.net/blacklabel/2zk93ysx/1/

2）在移动导航器手柄时，请防止更改图表：

(function(H) {
  H.Navigator.prototype.onMouseUp = function(e) {
    var navigator = this,
      chart = navigator.chart,
      xAxis = navigator.xAxis,
      scrollbar = navigator.scrollbar,
      unionExtremes,
      fixedMin,
      fixedMax,
      ext,
      DOMEvent = e.DOMEvent || e;
    if (
      (navigator.hasDragged && (!scrollbar || !scrollbar.hasDragged)) ||
      e.trigger === 'scrollbar'
    ) {
      unionExtremes = navigator.getUnionExtremes();
      // When dragging one handle, make sure the other one doesn't change
      if (navigator.zoomedMin === navigator.otherHandlePos) {
        fixedMin = navigator.fixedExtreme;
      } else if (navigator.zoomedMax === navigator.otherHandlePos) {
        fixedMax = navigator.fixedExtreme;
      }
      // Snap to right edge (#4076)
      if (navigator.zoomedMax === navigator.size) {
        fixedMax = navigator.reversedExtremes ?
          unionExtremes.dataMin : unionExtremes.dataMax;
      }
      // Snap to left edge (#7576)
      if (navigator.zoomedMin === 0) {
        fixedMin = navigator.reversedExtremes ?
          unionExtremes.dataMax : unionExtremes.dataMin;
      }
      ext = xAxis.toFixedRange(
        navigator.zoomedMin,
        navigator.zoomedMax,
        fixedMin,
        fixedMax
      );
    }
    if (e.DOMType !== 'mousemove') {
      navigator.grabbedLeft = navigator.grabbedRight =
        navigator.grabbedCenter = navigator.fixedWidth =
        navigator.fixedExtreme = navigator.otherHandlePos =
        navigator.hasDragged = navigator.dragOffset = null;
    }
  }
})(Highcharts);

演示：

• https://jsfiddle.net/blacklabel/l9wxf5c4/