如何通过自定义按钮控制Plotly布局图片的显示与隐藏

原代码的问题在于，update方法中visible参数仅作用于图表轨迹（trace），而背景图片属于布局（layout）的元素，需要通过修改layout.images来控制其显示状态。以下是修正后的代码：

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6]))

# 把图片配置存为变量，方便重复调用
image_config = dict(
    source="https://i.imgur.com/ebWhzmj.png",
    xref="paper", yref="paper",
    x=0.5, y=0.5,
    sizex=0.2, sizey=0.2,
    opacity=0.5,
    layer="below"
)
fig.add_layout_image(image_config)

steps = [
    dict(
        method="update",
        # 第一个参数控制trace显示，第二个参数控制布局的images
        args=[
            {"visible": [True]},  # 保持轨迹显示（可根据需求调整）
            {"title": "No image", "images": []}  # 隐藏图片：设置images为空列表
        ],
        label="No image"
    ),
    dict(
        method="update",
        args=[
            {"visible": [True]},  # 保持轨迹显示
            {"title": "Image", "images": [image_config]}  # 显示图片：传入图片配置
        ],
        label="Image"
    )
]

updatemenu = go.layout.Updatemenu(
    type="buttons",
    direction="down",
    showactive=True,
    buttons=list(steps)
)

fig.update_layout(
    updatemenus=[updatemenu],
    title="Image"
)

fig.show()
fig.write_html("test.html")

关键修改点： #

• 将图片配置提取为变量image_config，避免重复编写代码
• 在按钮的args第二个元素（布局更新参数）中，通过images字段控制图片的显示：
  • 隐藏图片时设置images: []（空列表表示无图片）
  • 显示图片时设置images: [image_config]（传入预定义的图片配置）
• 若无需控制轨迹显示状态，可将visible参数设为[True]保持轨迹始终显示，或按需调整

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