Dash：无数据点的折线位置悬停时如何显示对应y轴数值？

参考效果示意图：

你现有代码的默认配置仅能在数据已存在的时间点触发悬浮提示，无原生数据的中间时间点无法获取对应数值。由于你使用的是line_shape="hv"阶跃线，两个采样点之间的y值与前序采样点保持一致，可以通过以下两种方案实现需求： #

方案一：预插值补全数据（最简实现，无需额外Dash回调） #

该方案通过提前补全所有时间粒度的数值点，直接复用Plotly内置的悬浮能力即可达到效果，适合数据规模不大的场景：

1. 先对数据集做预处理，补全所有时间点并用前向填充补齐y值：

import pandas as pd
# 首先将time列转换为标准时间格式
df['time'] = pd.to_datetime(df['time'])
# 按菌种名称分组，按1分钟粒度补全时间点，y值用前序值填充
df = df.set_index('time').groupby('name', group_keys=False).resample('1min').ffill().reset_index()
# 若需要更高时间精度，可将resample参数调整为1s等更小粒度

2. 绘图代码仅需调整hovermode为x unified即可：

import plotly.express as px
fig = px.line(df, x="time", y="bacteria count", line_shape="hv", markers=True, color='name')
fig.update_traces(mode="markers+lines", hovertemplate=None)
fig.update_layout(
    hovermode="x unified",
    # 可选配置：添加竖线指示器，提升悬浮体验
    xaxis=dict(showspikes=True, spikemode="across", spikedash="dash")
)

方案二：Dash回调动态计算（适合数据量较大的场景） #

如果你的时间跨度极大，预补全数据会导致数据量过载，可以通过Dash回调实现：

• 监听dcc.Graph组件的hoverData事件，获取鼠标当前停留的时间点
• 对每个菌种的时间序列，查找小于当前时间点的最后一个采样点的y值
• 将计算得到的所有菌种的y值动态更新到自定义的悬浮提示组件中即可

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