如何为Highcharts图例中的系列名称添加可正常触发的跳转链接？

不用修改Highcharts源码，也不用完全自定义图例，有两种可直接落地的方案： #

方案1：CSS属性隔离（最简便，无需额外JS逻辑） #

利用CSS pointer-events属性即可实现链接脱离父元素事件拦截，步骤如下：

1. 配置系列name属性，给详情链接增加专属类名方便样式控制：

series: [
  {
    name: 'Western <a href="/your-download-path" class="legend-detail-link" target="_blank">(details)</a>',
    data: [10, 20, 30] // 替换为你的业务数据
  },
  {
    name: 'Eastern <a href="/your-download-path" class="legend-detail-link" target="_blank">(details)</a>',
    data: [15, 25, 35]
  },
  {
    name: 'Central <a href="/your-download-path" class="legend-detail-link" target="_blank">(details)</a>',
    data: [12, 22, 32]
  }
]

2. 增加全局CSS规则：

/* 让链接优先响应鼠标事件，绕过父元素的点击事件拦截 */
.highcharts-legend-item .legend-detail-link {
  pointer-events: all;
  /* 可选：调整链接样式 */
  margin-left: 4px;
  color: #2f7ed8;
  text-decoration: underline;
}

该方案的原理是pointer-events: all会让子元素优先响应鼠标交互，点击链接时会直接触发跳转默认行为，不会被父元素的图例切换事件拦截。

方案2：JS事件委托（兼容性更好，可阻止系列切换） #

如果需要兼容不支持pointer-events的老旧浏览器，或者希望点击链接时完全不触发系列显示/隐藏切换，可以用JS事件拦截实现：

Highcharts.chart('container', {
  // 其他图表配置不变
  chart: {
    events: {
      load: function () {
        // 监听图例容器的点击事件
        this.legend.container.addEventListener('click', function (e) {
          if (e.target.classList.contains('legend-detail-link')) {
            // 阻止事件冒泡到图例父元素，不会触发系列切换
            e.stopPropagation();
          }
        })
      }
    }
  },
  series: [/* 和方案1一致的系列配置 */]
})

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