如何将HTML表格加载到Plotly悬浮提示？格式异常求助

问题根源 #

Plotly默认会对悬浮提示里的文本做HTML转义处理，导致你存在DataFrame里的HTML表格代码被当成纯文本输出，没法被解析成可视化的表格。

两种有效解决方式 #

方式1：直接用hovertext传递HTML并关闭转义 #

通过hovertext指定存储HTML的列，再配置布局让Plotly解析HTML：

import plotly.express as px

# 初始化图表（这里以散点图为例，替换成你的图表类型）
fig = px.scatter(df, x="你的X列名", y="你的Y列名")

# 把hovertext设置为DataFrame里存HTML表格的列
fig.update_traces(hovertext=df["存储HTML的列名"], hoverinfo="text")

# 配置悬浮提示框，允许HTML渲染，避免标签截断
fig.update_layout(
    hoverlabel=dict(
        namelength=-1,  # 不截断提示标签
        bgcolor="white"  # 可选：设置提示框背景色，提升可读性
    )
)

fig.show()

方式2：用customdata配合hovertemplate自定义模板 #

如果需要更灵活的提示格式，可以用customdata传递HTML，再通过hovertemplate调用：

import plotly.graph_objects as go

fig = go.Figure(data=[go.Scatter(
    x=df["你的X列名"],
    y=df["你的Y列名"],
    customdata=df["存储HTML的列名"],
    # 用%{customdata}调用HTML内容，<extra></extra>去掉默认的额外信息
    hovertemplate='%{customdata}<extra></extra>'
)])

# 同样配置避免标签截断
fig.update_layout(hoverlabel=dict(namelength=-1))
fig.show()

额外注意点 #

• 确保你的HTML表格代码是完整的，所有标签都要闭合（比如<table>与</table>、<tr>与</tr>这类），残缺的HTML会导致渲染失败。
• 如果你用的是Plotly Express，部分图表类型需要显式设置hoverinfo="text"，才能覆盖默认的提示内容，让自定义的HTML生效。

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