Plotly离线浏览器图表：下拉菜单切换后图例无法更新

你的代码存在几个核心问题导致图例无法正常更新：

1. 可见性数组索引错误：你基于data_df.columns的长度生成visible数组，但实际添加的trace只有3个（Red、Blue、Green），而非DataFrame的4列（包含X轴），导致索引完全不匹配。
2. 图例可见性设置时机错误：在循环生成按钮时，你还未向fig中添加trace，此时fig.data是空的，修改trace可见性的代码完全无效。
3. 选项对应的trace索引混乱：比如blue_visible错误指向索引2，实际Blue是第二个trace（索引1），green_visible错误指向索引0，完全不符合实际trace顺序。

修正后的代码如下：

import numpy as np
import pandas as pd
import plotly.graph_objs as go
from plotly.offline import plot

# 示例数据
x = np.linspace(0, 10, 100)
y1 = np.sin(x)
y2 = np.cos(x)
y3 = np.sin(x) + np.cos(x)

data_df = pd.DataFrame({'X': x, 'Red': y1, 'Blue': y2, 'Green': y3})

layout = go.Layout(
    title='带下拉菜单的图表',
    xaxis=dict(title='X轴'),
    yaxis=dict(title='Y轴')
)

fig = go.Figure(layout=layout)

# 先添加所有trace，初始状态设为隐藏
for column_name in data_df.columns:
    if column_name != 'X':
        trace = go.Scatter(x=data_df['X'], y=data_df[column_name], mode='lines', name=column_name, visible=False)
        fig.add_trace(trace)

# 定义下拉菜单按钮集合
buttons = []

# 显示全部trace的按钮
buttons.append({
    'method': 'update',
    'label': '选项1：显示全部',
    'args': [
        {'visible': [True, True, True]},  # 对应3个trace的可见性顺序：Red、Blue、Green
        {'title': '显示全部曲线'}
    ]
})

# 仅显示Red的按钮
buttons.append({
    'method': 'update',
    'label': '选项2：仅显示红色',
    'args': [
        {'visible': [True, False, False]},
        {'title': '仅显示红色曲线'}
    ]
})

# 仅显示Blue的按钮
buttons.append({
    'method': 'update',
    'label': '选项3：仅显示蓝色',
    'args': [
        {'visible': [False, True, False]},
        {'title': '仅显示蓝色曲线'}
    ]
})

# 仅显示Green的按钮
buttons.append({
    'method': 'update',
    'label': '选项4：仅显示绿色',
    'args': [
        {'visible': [False, False, True]},
        {'title': '仅显示绿色曲线'}
    ]
})

# 更新布局添加下拉菜单
fig.update_layout(
    updatemenus=[{
        'buttons': buttons,
        'direction': 'down',
        'showactive': True,
        'x': 0.1,
        'y': 1.15
    }],
    title='显示全部曲线'
)

# 设置初始显示全部trace
fig.data[0].visible = True
fig.data[1].visible = True
fig.data[2].visible = True

plot(fig)

关键修正说明： #

• 先添加trace再配置按钮：确保生成按钮时fig.data已包含所有trace，索引对应准确。
• 精准匹配trace索引：3个trace的顺序为Red（0）、Blue（1）、Green（2），visible数组元素顺序严格对应。
• 用update方法同步更新：update方法可同时更新trace可见性和布局，图例会自动跟随trace的可见状态变化——trace设为True则图例显示，设为False则图例隐藏。

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