如何在Plotly.js图表的悬停提示框（tooltip）中嵌入HTML表格？

• 第一步开启HTML渲染权限
  Plotly默认会转义提示框内的HTML内容，需要在初始化图表的配置项中开启HTML支持，配置示例：

Plotly.newPlot('chart-container', data, layout, {
  tooltip: { html: true }
})

• 第二步构造表格内容
  两种常用实现方案：
  1. 直接给trace配置hovertext字段，每个数据点对应一条完整的HTML表格字符串，适合内容规则简单的场景：

  const trace = {
    x: [1, 2, 3],
    y: [10, 20, 30],
    type: 'scatter',
    hovertext: [
      '<table border="1" cellpadding="3"><tr><th>分类</th><th>数值</th></tr><tr><td>销量</td><td>123</td></tr><tr><td>同比</td><td>+12%</td></tr></table>',
      // 其他数据点的HTML内容...
    ],
    hoverinfo: 'text' // 表示仅渲染hovertext的内容
  }
  

  2. 用hovertemplate结合customdata动态生成，适合数据量大、表格结构统一的场景，无需单独拼接每个数据点的完整HTML：

  const trace = {
    x: [1, 2, 3],
    y: [10, 20, 30],
    type: 'scatter',
    customdata: [
      {sales: 123, growth: '+12%'},
      {sales: 256, growth: '+8%'},
      {sales: 198, growth: '-3%'}
    ],
    hovertemplate: '<table border="1" cellpadding="3"><tr><th>分类</th><th>数值</th></tr><tr><td>销量</td><td>%{customdata.sales}</td></tr><tr><td>同比</td><td>%{customdata.growth}</td></tr></table><extra></extra>'
    // <extra></extra>是用来隐藏默认的trace名称提示块
  }
  

• 第三步适配样式
  可以在layout.hoverlabel配置中设置提示框的背景色、内边距、对齐方式，也可以直接给HTML标签加内联样式控制表格的边框、间距、字体等，避免默认样式导致的排版错乱。

注意：HTML内容中的特殊字符需要提前转义，避免渲染异常。

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