如何在Vue.js/JavaScript中为ApexCharts tooltip添加可点击链接？

可以直接在ApexCharts自定义Tooltip返回的HTML字符串中插入<a>标签，实现可点击链接功能。只需将对应网站字段包装为链接元素即可，同时建议补充安全属性优化体验。

修改后的代码片段 #

let chartDomainData = [];

function getDomainDataFromIndex(index) {
     return chartDomainData[index];
}

tooltip: {
  enabled: true,
  custom: function ({dataPointIndex}) {
    const item = getDomainDataFromIndex(dataPointIndex);
    // 补全网址前缀，避免无协议导致的跳转错误
    const websiteUrl = item.x.startsWith('http') ? item.x : `https://${item.x}`;
    
    return `<div class="arrow-box
      ${
        item.label === "low"
            ? "bg-yellow"
            : "bg-blue"
    }
          ">
          <p> Label=
          ${item.label} credibility
          </p>
          <p> No of tweets=
          ${item.y}
          </p>
          <p> Website=
          <a href="${websiteUrl}" target="_blank" rel="noopener noreferrer">${item.x}</a>
          </p>
          <p> Source=
          ${item.platform}
          </p>
          </div>`;
  },
},

关键说明 #

• 用<a>标签包裹网站字段，通过href属性指定跳转地址
• target="_blank"：设置在新标签页打开链接，避免打断当前页面操作
• rel="noopener noreferrer"：防止新页面获取原页面控制权，提升安全性能
• 网址前缀判断：自动补全https://前缀，避免无协议字段导致的跳转失败

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