如何用Plotly下拉菜单动态筛选DataFrame的Lap列唯一值绘图？

核心思路 #

利用Plotly的updatemenus配置动态生成下拉选项，基于DataFrame中Lap列的唯一值自动构建轨迹和筛选逻辑，无需硬编码任何Lap名称或显示状态，适配动态数据场景。

实现代码 #

import pandas as pd
import plotly.graph_objects as go

# 示例动态DataFrame（实际可替换为你的动态数据）
df = pd.DataFrame({
    'distance': [1, 2, 3, 1, 2, 3, 1, 2, 3],
    'Speed': [1, 2, 3, 1.2, 2.2, 3.2, 1.3, 2.3, 3.3],
    'Lap': ['Lap 1', 'Lap 1', 'Lap 1', 'Lap 2', 'Lap 2', 'Lap 2', 'Lap 3', 'Lap 3', 'Lap 3']
})

# 获取所有唯一Lap值
unique_laps = df['Lap'].unique()

# 初始化图对象，添加所有Lap的轨迹
fig = go.Figure()
for lap in unique_laps:
    lap_data = df[df['Lap'] == lap]
    fig.add_trace(go.Scatter(
        x=lap_data['distance'],
        y=lap_data['Speed'],
        name=lap,
        visible=True  # 默认显示所有轨迹
    ))

# 构建下拉菜单选项
updatemenus = []
# 第一个选项：显示所有Lap
show_all_option = {
    'label': '显示全部',
    'method': 'update',
    'args': [
        {'visible': [True] * len(unique_laps)},  # 所有轨迹设为可见
        {'title': '所有Lap的Speed vs Distance'}
    ]
}
# 为每个Lap生成单独的选项
lap_options = []
for idx, lap in enumerate(unique_laps):
    # 生成可见状态列表：当前lap设为True，其余为False
    visible = [False] * len(unique_laps)
    visible[idx] = True
    lap_options.append({
        'label': lap,
        'method': 'update',
        'args': [
            {'visible': visible},
            {'title': f'{lap}的Speed vs Distance'}
        ]
    })

# 合并所有选项到下拉菜单
updatemenus.append({
    'buttons': [show_all_option] + lap_options,
    'direction': 'down',
    'showactive': True,
    'x': 0.1,
    'xanchor': 'left',
    'y': 1.15,
    'yanchor': 'top'
})

# 配置图表布局
fig.update_layout(
    updatemenus=updatemenus,
    title='Speed vs Distance（按Lap筛选）',
    xaxis_title='Distance',
    yaxis_title='Speed'
)

# 在Flask中可以通过fig.to_html()嵌入页面
# 例如：return render_template('plot.html', plot_html=fig.to_html(full_html=False))

关键优势 #

• 完全动态适配：自动读取Lap列的唯一值，新增Lap或数据无序时无需修改代码
• 无Dash依赖：纯Plotly原生实现，直接通过fig.to_html()嵌入Flask模板即可
• 灵活的筛选逻辑：默认包含“显示全部”选项，同时支持单独查看任意Lap的数据

内容的提问来源于stack exchange，提问作者João Guilherme Bezerra Alves