如何让AmCharts v5地图HTML提示框中的链接可点击？

AmCharts v5用tooltipHTML加的链接没法点击，核心原因是tooltip默认会拦截内部元素的交互事件，且自带样式禁用了指针事件。按下面的方法改就能搞定：

• 给tooltip模板开启interactive属性，允许内部元素响应鼠标操作
• 给tooltip内容容器加pointer-events: auto样式，解开事件拦截
• 精简地图多边形的交互配置，避免冲突

具体代码修改如下：

// 配置tooltip模板，核心是开启interactive和添加样式
polygonSeries.mapPolygons.template.tooltip.setAll({
  interactive: true,
  // 自定义tooltip背景样式（可选，按需调整）
  getFillFromSprite: false,
  background: am5.Rectangle.new(root, {
    fill: am5.color(0xffffff),
    stroke: am5.color(0xcccccc),
    strokeWidth: 1,
    cornerRadius: 5
  }),
  // tooltipHTML内嵌样式解开指针事件，链接替换为你的目标地址即可
  tooltipHTML: `{name} <style>.am5tooltip-content { pointer-events: auto; }</style> <a href="#">查看项目</a>`
});

// 地图多边形的基础配置
polygonSeries.mapPolygons.template.setAll({
  calculateVisualCenter: true,
  tooltipPosition: "fixed",
  keepTargetHover: true
});

关键说明：

• tooltip.setAll({ interactive: true })是必须项，这一步让tooltip内的DOM元素能接收点击事件
• 内嵌的<style>用来覆盖AmCharts默认的pointer-events: none，确保链接可被点击
• 原配置里的interactive、interactionsEnabled无需加到地图多边形上，反而可能干扰事件传递

改完后，tooltip里的链接就能正常点击，把href="#"换成你实际需要跳转的地址即可。

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