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/