Highcharts 6.1.0动态plot bands覆盖系列致交互失效问题

你遇到的这个问题是Highcharts从5.0.14升级到6.1.0后出现的模块引入顺序导致的回归bug，核心原因是accessibility和exporting模块的加载顺序干扰了plot bands的层级与事件传递逻辑。

问题根源 #

当你把accessibility模块放在exporting模块之后引入时，会触发这个冲突：

• 动态调用chartObject.update({ yAxis: {plotBands: [...], plotLines: [...]} })添加的plot bands会被错误地渲染在系列图层的上方，直接拦截了鼠标事件——这就是为什么你设置zIndex也没用，悬停提示框触发不了
• 但初始化时同时创建系列和plot bands却正常，因为此时模块的初始化逻辑还没产生冲突，图层层级是正确的

解决方案 #

调整模块的引入顺序就能解决这个问题，确保**exporting模块在accessibility模块之后加载**，或者直接移除你不需要的模块：

1. 正确的引入顺序示例：

   <script src="https://code.highcharts.com/6.1.0/highcharts.js"></script>
   <script src="https://code.highcharts.com/6.1.0/modules/accessibility.js"></script>
   <script src="https://code.highcharts.com/6.1.0/modules/exporting.js"></script>
   

2. 如果你不需要accessibility或exporting功能，直接删掉对应的<script>标签，也能彻底避免这个冲突。

验证结论 #

你自己的测试也完全印证了这个原因：

• 排除其中任意一个模块，问题就消失了
• 把accessibility放在exporting之后引入，问题就会复现

这是Highcharts 6.x版本里特定模块组合的兼容性问题，不需要修改业务代码，调整加载顺序就能绕过这个bug。

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