如何在不破坏缩放功能的前提下切换图表鼠标光标样式

问题根源 #

你之前直接用chart.container.onmousedown给容器绑定事件，这种方式会替换掉Highcharts自带的缩放事件监听，导致原本的x轴缩放功能失效——因为原生DOM的onxxx属性只能绑定一个事件处理函数，后赋值的会覆盖之前的。

修复方案 #

改用addEventListener来绑定鼠标事件，这样可以在保留Highcharts原有事件的基础上，追加你的光标切换逻辑，两者互不影响：

1. 保留原有CSS样式 #

.zoomableChart:hover {
    cursor: zoom-in;
}

2. 修改图表事件配置 #

chart: {
    zoomType: 'x',
    events: {
        load: function () {
            const chart = this;
            // 追加鼠标按下事件，切换光标
            chart.container.addEventListener('mousedown', () => {
                chart.container.style.cursor = 'col-resize';
            });
            // 追加鼠标松开事件，恢复光标
            chart.container.addEventListener('mouseup', () => {
                chart.container.style.cursor = 'zoom-in';
            });
            // 额外处理鼠标移出图表的情况，避免光标异常
            chart.container.addEventListener('mouseleave', () => {
                chart.container.style.cursor = 'zoom-in';
            });
        }
    }
}

额外说明 #

• addEventListener支持同时绑定多个事件处理函数，所以不会覆盖Highcharts内置的缩放逻辑，两者能同时生效。
• 加上mouseleave事件是为了处理用户按下鼠标后没松开就移出图表的场景，保证光标能正常恢复。

内容的提问来源于stack exchange，提问作者Jérémy Vallin