为Plotly图表添加下拉菜单实现类型切换需求

直接通过Plotly的updatemenus配置下拉选项，就能实现无需修改变量、一键切换不同Type的双折线图展示，核心思路是预先创建所有Type对应的折线Trace，通过下拉按钮控制对应Trace的可见性。

完整代码示例 #

import plotly.graph_objects as go
import pandas as pd

# 替换成你的实际数据
dates = pd.date_range(start='2024-01-01', periods=10)
df = pd.DataFrame({
    'date': dates.repeat(3),
    'type': ['A', 'B', 'C']*10,
    'value_1': [i+1 for i in range(30)],
    'value_2': [i*1.5 for i in range(30)]
})

# 预先创建所有Type的Trace，初始仅显示Type A的两条线
traces = []
for t in df['type'].unique():
    filtered_data = df[df['type'] == t]
    # 添加value_1的折线
    traces.append(go.Scatter(
        x=filtered_data['date'],
        y=filtered_data['value_1'],
        name=f'{t} - value_1',
        visible=(t == 'A')  # 初始状态仅Type A可见
    ))
    # 添加value_2的折线
    traces.append(go.Scatter(
        x=filtered_data['date'],
        y=filtered_data['value_2'],
        name=f'{t} - value_2',
        visible=(t == 'A')
    ))

# 配置下拉菜单按钮
dropdown_buttons = []
for t in df['type'].unique():
    # 找到当前Type对应的两个Trace索引
    target_indices = [i for i, tr in enumerate(traces) if t in tr.name]
    # 生成可见性列表：仅目标Trace可见，其余隐藏
    visibility_status = [False] * len(traces)
    for idx in target_indices:
        visibility_status[idx] = True
    
    dropdown_buttons.append(dict(
        label=f'Type {t}',
        method='update',
        args=[
            {'visible': visibility_status},  # 更新Trace可见性
            {'title': f'Type {t} 双折线图'}   # 同步更新图表标题
        ]
    ))

# 组装图表并添加下拉菜单
fig = go.Figure(data=traces)
fig.update_layout(
    updatemenus=[dict(
        type="dropdown",
        direction="down",
        buttons=dropdown_buttons,
        x=0.1,  # 下拉菜单的X轴位置
        y=1.15  # 下拉菜单的Y轴位置（悬浮在标题上方）
    )],
    title='Type A 双折线图',
    xaxis_title='日期',
    yaxis_title='数值'
)

fig.show()

关键说明 #

• Trace预创建：一次性生成所有Type对应的value_1和value_2折线，避免切换时动态生成数据，保证交互流畅
• 可见性控制：每个下拉按钮对应一组可见性状态，仅显示当前Type的两条折线，其余隐藏
• 无需修改变量：所有切换逻辑通过Trace的名称关联实现，不需要改动原始数据变量，直接通过下拉菜单操作即可

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