Plotly：如何通过下拉菜单筛选Pandas DataFrame并展示单条折线图

没问题，这个需求非常常见——当多组折线挤在一起时，下拉菜单确实是让图表更清晰的好办法。我给你两种实现思路，你可以根据自己的数据量和偏好选择：

方法1：预加载所有折线，通过下拉菜单控制可见性（推荐） #

这种方法会一次性把所有vid_id对应的折线都画出来，然后通过下拉菜单切换哪条折线可见。好处是切换时响应更快，不需要重新加载数据，适合数据量较大的场景：

import pandas as pd
import plotly.graph_objects as go

# 假设你的DataFrame是df，结构包含row_num、audienceWatchRatio、vid_id
# 先获取所有唯一的视频ID
unique_vids = df['vid_id'].unique()

# 创建空的Figure对象
fig = go.Figure()

# 为每个视频ID添加一条折线，默认只显示第一个视频的折线
for vid in unique_vids:
    filtered_data = df[df['vid_id'] == vid]
    fig.add_trace(go.Scatter(
        x=filtered_data['row_num'],
        y=filtered_data['audienceWatchRatio'],
        name=vid,
        visible=(vid == unique_vids[0])  # 默认仅第一个视频可见
    ))

# 配置下拉菜单的按钮
dropdown_buttons = []
for vid in unique_vids:
    # 每个按钮对应一个视频，点击后仅该视频的折线可见
    button = dict(
        label=vid,
        method="update",
        args=[
            {"visible": [current_vid == vid for current_vid in unique_vids]},
            {"title": f"Audience Watch Ratio - Video: {vid}"}  # 切换时更新标题
        ]
    )
    dropdown_buttons.append(button)

# 更新布局，添加下拉菜单
fig.update_layout(
    updatemenus=[dict(
        buttons=dropdown_buttons,
        direction="down",  # 下拉方向
        active=0,  # 默认选中第一个按钮
        showactive=True,  # 高亮当前选中的按钮
        x=0.1,  # 菜单的x轴位置（0-1）
        y=1.1  # 菜单的y轴位置（0-1）
    )],
    title="Audience Watch Ratio by Video",
    xaxis_title="Row Number",
    yaxis_title="Audience Watch Ratio"
)

fig.show()

关键部分解释： #

• visible=(vid == unique_vids[0])：设置初始状态下只有第一个视频的折线可见
• method="update"：既可以更新图表的数据（可见性），也可以更新布局（比如标题）
• {"visible": [current_vid == vid for current_vid in unique_vids]}：生成一个布尔列表，只有当前选中的视频对应的元素是True，其余为False，实现仅显示单条折线

方法2：动态加载选中视频的数据 #

如果你的数据量特别大，预加载所有折线会导致图表加载慢，可以用这种方法：每次选择下拉选项时，重新筛选数据并更新折线：

import pandas as pd
import plotly.express as px

unique_vids = df['vid_id'].unique()

# 初始显示第一个视频的折线
fig = px.line(
    df[df['vid_id'] == unique_vids[0]],
    x="row_num",
    y="audienceWatchRatio",
    title="Audience Watch Ratio by Video",
    labels={"row_num": "Row Number", "audienceWatchRatio": "Audience Watch Ratio"}
)

# 配置下拉菜单按钮
dropdown_buttons = []
for vid in unique_vids:
    filtered_data = df[df['vid_id'] == vid]
    button = dict(
        label=vid,
        method="restyle",
        args=[
            {"x": [filtered_data['row_num']], "y": [filtered_data['audienceWatchRatio']], "name": vid}
        ]
    )
    dropdown_buttons.append(button)

fig.update_layout(
    updatemenus=[dict(
        buttons=dropdown_buttons,
        direction="down",
        active=0,
        showactive=True
    )]
)

fig.show()

关键部分解释： #

• method="restyle"：仅更新图表的 trace 数据，不修改布局
• args里直接传入选中视频的x和y数据，替换掉当前图表的数据

两种方法都能实现你要的效果，我个人更推荐第一种，因为交互体验更流畅。如果需要调整下拉菜单的位置或者样式，直接修改update_layout里的x、y等参数就可以了。

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