Plotly折线图：如何实现vline注释仅在hover时显示

可以实现让注释仅在hover到竖线（vline）时显示，核心思路是将事件描述放到竖线的hover提示中，替代静态显示的annotations，具体实现有两种简洁方法：

方法一：使用add_vline()原生支持的hovertext参数 #

这是最直接的方式，Plotly的add_vline()方法支持设置hovertext，hover到竖线时自动显示对应文本，无需额外静态注释。

代码示例 #

import plotly.express as px
import pandas as pd
import numpy as np

# 生成示例折线图数据
df = pd.DataFrame({
    "日期": pd.date_range(start="2024-01-01", periods=30),
    "数值": [i + np.random.randn() for i in range(30)]
})

fig = px.line(df, x="日期", y="数值", title="业务指标趋势图")

# 添加带hover提示的事件竖线
# 事件1：版本更新
fig.add_vline(
    x=pd.to_datetime("2024-01-05"),
    line_dash="dash",
    line_color="#ff4d4f",
    hovertext="版本更新v1.1：修复支付模块核心bug，提升交易成功率",
    name="版本更新"
)

# 事件2：流量峰值
fig.add_vline(
    x=pd.to_datetime("2024-01-06"),
    line_dash="dash",
    line_color="#1890ff",
    hovertext="流量峰值：当日UV突破10万，触发临时扩容",
    name="流量峰值"
)

# 配置hover模式，确保精准触发
fig.update_layout(
    hovermode="x",  # 仅hover到竖线或对应x轴位置时显示提示
    showlegend=False  # 关闭竖线图例（按需开启）
)

fig.show()

方法二：自定义形状+hover数据（更灵活的样式控制） #

如果需要对竖线样式或hover提示做更精细化调整，可以用shapes创建竖线，再通过绑定hover文本实现需求。

代码示例 #

import plotly.graph_objects as go
import pandas as pd
import numpy as np

df = pd.DataFrame({
    "日期": pd.date_range(start="2024-01-01", periods=30),
    "数值": [i + np.random.randn() for i in range(30)]
})

fig = go.Figure(data=go.Scatter(x=df["日期"], y=df["数值"], mode="lines"))

# 定义事件列表
events = [
    {"date": "2024-01-05", "color": "#ff4d4f", "desc": "版本更新v1.1：修复支付模块bug"},
    {"date": "2024-01-06", "color": "#1890ff", "desc": "流量峰值：UV突破10万"}
]

# 添加自定义竖线和hover数据
for event in events:
    x_date = pd.to_datetime(event["date"])
    fig.add_shape(
        type="line",
        x0=x_date, x1=x_date,
        y0=df["数值"].min(), y1=df["数值"].max(),
        line=dict(color=event["color"], dash="dash"),
        name=event["desc"]
    )
    # 绑定hover数据（隐藏标记点，仅保留hover提示）
    fig.add_trace(go.Scatter(
        x=[x_date], y=[df["数值"].mean()],
        mode="markers",
        marker=dict(size=0),
        hovertext=event["desc"],
        hoverinfo="text"
    ))

fig.update_layout(
    hovermode="closest",  # 优先显示最近元素的hover提示
    title="业务指标趋势图"
)

fig.show()

效果说明 #

两种方法都能实现：默认状态下仅显示竖线，当鼠标hover到竖线时，才弹出对应的事件描述，彻底解决注释重叠问题。

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