如何用Plotly updatemenu实现trace及对应yaxis的显示/隐藏切换？

问题场景 #

我有一个包含3条Trace的Plotly图表，每条Trace对应独立的Y轴。初始状态仅Trace 'A'及其Y轴可见，另外两条Trace和对应Y轴均隐藏。希望通过更新菜单中的按钮，点击后切换对应Trace及Y轴的显示/隐藏状态（再次点击则隐藏）。但遇到两个问题：

• 使用update方法时必须传入所有Trace的可见性列表，无法获取当前状态，导致切换新Trace时之前的设置被重置
• 使用restyle方法仅能修改Trace的可见性，无法控制Y轴的显示状态

解决方案 #

可以通过update方法结合按钮的args和args2实现toggle逻辑，仅针对当前按钮对应的Trace和Y轴修改可见性，不影响其他组件的状态。以下是修正后的代码：

import plotly.graph_objects as go

fig = go.Figure()

# 添加三条Trace
fig.add_trace(go.Scatter(
    x=[1, 2, 3],
    y=[4, 5, 6],
    name="A",
    line=dict(color='#1f77b4')
))

fig.add_trace(go.Scatter(
    x=[2, 3, 4],
    y=[40, 50, 60],
    name="B",
    yaxis="y2",
    visible=False,
    line=dict(color='#ff7f0e')
))

fig.add_trace(go.Scatter(
    x=[4, 5, 6],
    y=[40000, 50000, 60000],
    name="C",
    yaxis="y3",
    visible=False,
    line=dict(color='#d62728')
))

# 配置多Y轴
fig.update_layout(
    xaxis=dict(domain=[0.3, 0.7]),
    yaxis=dict(
        title="A",
        titlefont=dict(color="#1f77b4"),
        tickfont=dict(color="#1f77b4")
    ),
    yaxis2=dict(
        title="B",
        titlefont=dict(color="#ff7f0e"),
        tickfont=dict(color="#ff7f0e"),
        anchor="free",
        overlaying="y",
        side="left",
        position=0.15,
        visible=False
    ),
    yaxis3=dict(
        title="C",
        titlefont=dict(color="#d62728"),
        tickfont=dict(color="#d62728"),
        anchor="free",
        overlaying="y",
        side="left",
        position=0.05,
        visible=False
    )
)

# 配置按钮：每个按钮仅控制对应Trace和Y轴的显示/隐藏
btn1 = dict(
    method='update',
    label="A",
    # 点击后隐藏A的Trace和Y轴
    args=[
        {"visible": [False, None, None]},  # None表示不修改其他Trace的可见性
        {"yaxis.visible": False}
    ],
    # 再次点击恢复显示
    args2=[
        {"visible": [True, None, None]},
        {"yaxis.visible": True}
    ]
)

btn2 = dict(
    method='update',
    label="B",
    args=[
        {"visible": [None, False, None]},
        {"yaxis2.visible": False}
    ],
    args2=[
        {"visible": [None, True, None]},
        {"yaxis2.visible": True}
    ]
)

btn3 = dict(
    method='update',
    label="C",
    args=[
        {"visible": [None, None, False]},
        {"yaxis3.visible": False}
    ],
    args2=[
        {"visible": [None, None, True]},
        {"yaxis3.visible": True}
    ]
)

# 添加更新菜单
update_menu = [
    dict(showactive=True, xanchor='left', yanchor='top', buttons=[btn1], y=0.75, x=1.05),
    dict(showactive=True, xanchor='left', yanchor='top', buttons=[btn2], y=0.65, x=1.05),
    dict(showactive=True, xanchor='left', yanchor='top', buttons=[btn3], y=0.55, x=1.05)
]

for m in update_menu:
    m['type'] = 'buttons'

fig.update_layout(
    updatemenus=update_menu,
    title_text="多Y轴示例",
    width=800
)

fig.show()

关键改进说明 #

• 使用None作为可见性列表中的占位符，仅修改当前按钮对应的Trace可见性，保留其他Trace的当前状态
• 每个按钮仅操作自身对应的Y轴的visible属性，不影响其他轴的显示状态
• 通过args和args2实现点击切换的toggle逻辑，无需依赖外部状态管理

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