Plotly图表含大量数据时悬浮提示框不显示的解决方法咨询

当Plotly图表的悬浮提示框（hover label）包含大量数据时，若提示框高度超出图表可用空间，会出现无法渲染的情况。比如以下代码复制了多列数据，导致顶部数据点的悬浮提示框完全不显示：

import plotly.express as px

df_2007 = px.data.gapminder().query("year==2007")
df_2007 = df_2007.assign(**{f"{col}_dup1": df_2007[col] for col in df_2007.columns})
df_2007 = df_2007.assign(**{f"{col}_dup2": df_2007[col] for col in df_2007.columns})

fig = px.scatter(
    df_2007,
    x="gdpPercap",
    y="lifeExp",
    log_x=True,
    hover_name="country",
    hover_data=df_2007.columns,
)

fig.show()

调小字体（fig.update_layout(hoverlabel=dict(font_size=8))）或横向排列内容能临时解决，但前者可读性下降，后者体验不佳。以下是更优的解决方案：

方案1：为悬浮提示框添加滚动功能（推荐） #

Plotly原生hoverlabel不支持滚动，但可以通过hovertemplate嵌入HTML和CSS，强制提示框出现垂直滚动条，这样即使内容再多，也能在固定高度内滚动查看，不会因超出空间不渲染。

实现代码： #

import plotly.express as px

df_2007 = px.data.gapminder().query("year==2007")
df_2007 = df_2007.assign(**{f"{col}_dup1": df_2007[col] for col in df_2007.columns})
df_2007 = df_2007.assign(**{f"{col}_dup2": df_2007[col] for col in df_2007.columns})

# 生成hover内容的HTML列表
hover_fields = [f"{col}: %{{customdata[{i}]}}" for i, col in enumerate(df_2007.columns)]
hover_html = "<br>".join(hover_fields)

# 用带滚动样式的div包裹内容
hovertemplate = f"""
<div style="max-height: 250px; overflow-y: auto; padding: 8px;">
    <b>%{{hovertext}}</b><br><br>
    {hover_html}
</div>
"""

fig = px.scatter(
    df_2007,
    x="gdpPercap",
    y="lifeExp",
    log_x=True,
    hover_name="country",
    custom_data=df_2007.columns,  # 用custom_data传递所有字段
    hovertemplate=hovertemplate
)

# 关闭原生hoverlabel的样式干扰
fig.update_layout(hoverlabel=dict(bgcolor="white", bordercolor="#ccc"))

fig.show()

说明： #

• 通过custom_data传递所有需要展示的字段，避免hover_data自动生成的格式限制
• 用HTML的<div>设置max-height和overflow-y: auto，强制提示框出现滚动条
• 自定义样式可以匹配原生hoverlabel的外观，保证视觉一致性

方案2：动态限制提示框显示的字段数量 #

如果不需要展示所有字段，可以根据数据点的位置动态调整显示的字段数，比如顶部的点只显示前N个字段，底部的点显示全部：

实现代码： #

import plotly.express as px

df_2007 = px.data.gapminder().query("year==2007")
df_2007 = df_2007.assign(**{f"{col}_dup1": df_2007[col] for col in df_2007.columns})
df_2007 = df_2007.assign(**{f"{col}_dup2": df_2007[col] for col in df_2007.columns})

# 定义不同位置显示的字段数
top_fields = df_2007.columns[:10]  # 顶部点显示前10个字段
bottom_fields = df_2007.columns    # 底部点显示全部字段

fig = px.scatter(
    df_2007,
    x="gdpPercap",
    y="lifeExp",
    log_x=True,
    hover_name="country",
)

# 为顶部和底部的点分别设置hover_data
fig.update_traces(
    selector=lambda trace: trace.y > df_2007['lifeExp'].quantile(0.7),  # 顶部30%的点
    hover_data=top_fields
)
fig.update_traces(
    selector=lambda trace: trace.y <= df_2007['lifeExp'].quantile(0.7), # 底部70%的点
    hover_data=bottom_fields
)

fig.show()

说明： #

• 通过selector筛选不同位置的数据点，针对性设置hover内容
• 可以根据实际需求调整字段数量和筛选条件，平衡内容完整性和显示效果

方案3：调整hoverlabel的位置策略 #

Plotly默认会尝试将hoverlabel放在数据点的上方或下方，当空间不足时可能不显示。可以强制设置hoverlabel的对齐方式，让它优先向某个方向扩展：

fig.update_layout(
    hoverlabel=dict(
        align="left",  # 左对齐，避免内容换行导致高度增加
        namelength=-1, # 完整显示hover_name
        bgcolor="white",
        font_size=10
    )
)

说明： #

• 左对齐可以减少内容换行，一定程度上降低提示框高度
• 该方案仅适合内容量不是特别大的场景，无法彻底解决大量数据的问题

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