如何在Plotly图表悬停文本中添加可点击的多选项超链接？

Plotly原生的悬停提示框（tooltip）不支持直接渲染HTML链接，要实现悬停时显示多个可点击选项，需要通过自定义JavaScript逻辑修改提示框内容。以下是完整的实现方案：

完整代码示例 #

library(ggplot2)
library(plotly)
library(htmlwidgets)

# 准备包含多链接的数据
mydata <- data.frame( 
  xx = c(1, 2),  
  yy = c(3, 4),
  # 用分号分隔多个链接（避免和URL自带的逗号冲突）
  links = c(
    "https://www.google.com;https://www.reddit.com/",
    "https://www.r-project.org/;http://stackoverflow.com/"
  ),
  # 对应链接的显示名称（可选，也可直接用URL作为显示文本）
  link_names = c(
    "Google;Reddit",
    "R语言官网;Stack Overflow"
  )
)

# 基础ggplot绘图，通过customdata传递结构化数据
g <- ggplot(mydata, aes(x = xx, y = yy, 
                        text = paste0("xx: ", xx),
                        customdata = paste(links, link_names, sep = "|"))) +
  geom_point(size = 5) # 放大点，提升交互体验

# 转换为plotly对象
p <- ggplotly(g, tooltip = c("text"))

# 注入自定义JS逻辑修改tooltip
onRender(
  p, 
  "function(el) {
    // 监听悬停事件
    el.on('plotly_hover', function(d) {
      // 拆分自定义数据，分离链接集合和名称集合
      const [linksStr, namesStr] = d.points[0].customdata.split('|');
      const links = linksStr.split(';');
      const names = namesStr.split(';');
      
      // 获取Plotly生成的tooltip元素
      const tooltip = document.querySelector('.hovertext');
      if (!tooltip) return;
      
      // 构造带可点击链接的HTML内容
      let tooltipHTML = tooltip.innerHTML + '<br>';
      links.forEach((url, idx) => {
        const displayName = names[idx] || url; // 无名称时直接显示URL
        tooltipHTML += `<a href='${url.trim()}' target='_blank'>${displayName.trim()}</a><br>`;
      });
      
      // 替换tooltip的原始内容为HTML
      tooltip.innerHTML = tooltipHTML;
    });
  }"
)

关键逻辑说明 #

1. 数据结构化：

   • 用分号拼接多个链接，避免和URL中的逗号冲突；若链接包含分号，可更换为||等特殊分隔符
   • 用|分隔链接集合和名称集合，方便JS拆分处理
   • 通过customdata字段把这些结构化数据传递给前端

2. JavaScript交互：

   • 监听plotly_hover事件，获取当前悬停点的自定义数据
   • 拆分字符串得到单个链接和对应名称，生成HTML链接标签
   • 定位Plotly自动生成的tooltip元素（类名为.hovertext），替换其内容为带链接的HTML
   • 添加target='_blank'属性，让链接在新窗口打开

3. 兼容性提示：

   • 不同Plotly版本的tooltip元素类名可能略有差异，若.hovertext无效，可通过浏览器开发者工具查看DOM结构调整选择器
   • 若链接包含特殊字符，需提前做转义处理，避免HTML渲染异常

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