如何用按钮隐藏Plotly子图标记？代码问题排查及需求实现

错误点说明 #

1. 标记隐藏方式错误：设置marker.size: 0无法完全隐藏绘图区域的标记（Plotly仍会渲染该元素，只是尺寸为0），且会错误影响图例标记。正确做法是将图表的mode从lines+markers改为lines，直接取消标记的渲染逻辑。
2. 未指定目标子图：你的按钮逻辑会对所有trace生效，没有限定仅修改左侧子图对应的trace（第一个添加的trace索引为0）。

修正后的代码 #

import plotly.graph_objs as go
from plotly.subplots import make_subplots
import numpy as np

np.random.seed(42)
n = 100
x, y, z = np.random.rand(3, n)

fig = make_subplots(rows=1, cols=2, 
                    specs=[[{'type': 'scatter'}, {'type': 'scatter'}]]
                    )

# 左侧子图trace（索引0）
fig.add_trace(
go.Scatter(
    x=x,
    y=y,
    mode='lines+markers',
    marker=dict(
        size=5,
        color='red',
        opacity=0.8
    ),
    name='m'
),
row=1, col=1)

# 右侧子图trace（索引1）
fig.add_trace(
 go.Scatter(
    x=x,
    y=y,
    mode='lines+markers',
    marker=dict(
        size=5,
        color='red',
        opacity=0.8
    ),
    name='m2'
), row=1, col=2)

# 按钮设置：仅修改索引0的trace，实现标记的隐藏/恢复
buttons = [
    dict(
        method='restyle',
        args=[{"mode": "lines"}, [0]],  # 第二个参数[0]指定作用于第一个trace
        label='隐藏左侧标记'
    ),
    dict(
        method='restyle',
        args=[{"mode": "lines+markers"}, [0]],
        label='恢复左侧标记'
    )
]

fig.update_layout(
    updatemenus=[{
        'buttons': buttons,
        'direction': 'down',
        'showactive': True,
        'x': 0.1,
        'xanchor': 'left',
        'y': 1.1,
        'yanchor': 'top'
    }]
)

fig.show()

关键修改说明 #

• 按钮的args增加了[0]参数，明确指定仅对索引为0的trace（左侧子图）进行修改，右侧子图的trace不受影响。
• 将隐藏标记的逻辑从修改marker.size改为修改mode为lines，彻底取消标记渲染，同时避免影响图例显示。

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