如何禁用Highcharts Navigator范围整体拖动，仅保留左右按钮单独调整？

要禁用Navigator中间区域的整体拖动功能，只保留左右手柄单独调整的功能，可以通过以下两种方式实现：

方法一：通过事件阻止中间区域的拖动行为 #

在图表的load事件中，获取Navigator的遮罩元素，移除其鼠标按下事件的监听，这样点击或拖动中间区域就不会触发范围移动：

Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function() {
                // 获取Navigator的遮罩元素
                const navigatorMask = this.navigator.mask;
                if (navigatorMask) {
                    // 移除mousedown事件监听，阻止拖动
                    navigatorMask.onmousedown = null;
                }
            }
        }
    },
    rangeSelector: {
        enabled: false
    },
    tooltip: {
        enabled: false
    },
    exporting: {
        enabled: false,
    },
    yAxis: {
        height: 0,
        gridLineWidth: 0,
        labels: {
            enabled: false
        }
    },
    xAxis: {
        lineWidth: 0,
        tickLength: 0,
        labels: {
            enabled: false
        },
        events: {
            setExtremes: function(e) {

            },
        },
        min: 40,
        max: 50,
    },
    scrollbar: {
        enabled: false,
    },
    credits: {
        enabled: false,
    },
    navigator: {
        series: {
            type: 'column',
            animation: {
                duration: 0,
            },
        },
        height: 100,
        // 设置遮罩为透明，避免视觉上的hover反馈
        maskFill: 'transparent',
        xAxis: {
            lineColor: "gray",
            lineWidth: 1,
            labels: {
                step: 1,
                align: "right",
                enabled: true,
                x: 1,
                y: 10,
                formatter: function() {
                    return this.value;
                },
            },
            min: 0,
            max: 100
        },
    },
    series: [{
        name: 'data 1',
        data: [
            [30, 158000],
            [31, 158000],
            [32, 158000],
            [33, 158000],
            [34, 158000],
            [35, 159000],
            [40, 161000],
            [41, 161000],
            [42, 161000],
            [43, 161000],
            [44, 161000],
            [45, 165000],
            [46, 165000],
            [47, 165000],
            [48, 165000],
            [49, 165000],
            [50, 180000],
            [51, 180000],
            [52, 180000],
            [53, 180000],
            [54, 180000],
            [55, 70000],
            [56, 70000],
            [57, 70000],
            [58, 70000],
            [59, 70000],
            [60, 185000],
            [61, 185000],
            [62, 185000],
            [63, 185000],
            [64, 185000],
            [65, 185000],
        ],
        lineWidth: 0,
        marker: {
            enabled: false,
            states: {
                hover: {
                    enabled: false
                }
            }
        },
    }]
});

方法二：覆盖Highcharts的Navigator拖动方法 #

通过修改Highcharts的原型方法，只允许左右手柄触发拖动，屏蔽中间区域的拖动：

// 在初始化图表前覆盖方法
Highcharts.Navigator.prototype.onMouseDown = function(e) {
    // 仅当点击的是左右手柄时，才执行原逻辑
    if (e.target.classList.contains('highcharts-navigator-handle-left') || 
        e.target.classList.contains('highcharts-navigator-handle-right')) {
        Highcharts.Navigator.prototype.onMouseDown.base.apply(this, arguments);
    }
};

// 然后初始化图表
Highcharts.stockChart('container', {
    // 原有的配置项...
});

关键说明 #

• 设置navigator.maskFill: 'transparent'是为了移除中间区域的半透明遮罩，避免用户看到hover状态的视觉反馈，同时也能减少不必要的事件触发。
• 两种方法都能实现仅保留左右手柄调整范围的功能，方法一更直接针对当前实例，方法二是全局修改，适合多个图表的场景。

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