Plotly Dash实现散点图颜色/大小参数切换功能的问题求助

一、先搞定daq.BooleanSwitch的ID冲突问题 #

你之前单独用开关可行、两个就冲突，核心是没给每个开关分配唯一ID。给两个开关分别设不同ID，再让回调同时监听这两个开关的状态即可：

import dash
from dash import dcc, html, Input, Output, callback
import plotly.express as px
from dash_daq import BooleanSwitch

app = dash.Dash(__name__)

# 示例数据
df = px.data.iris()
base_fig = px.scatter(df, x="sepal_width", y="sepal_length")

app.layout = html.Div([
    BooleanSwitch(
        id='color_switch',
        label='切换点颜色',
        on=False
    ),
    BooleanSwitch(
        id='size_switch',
        label='切换点大小',
        on=False
    ),
    dcc.Graph(id='scatter-graph', figure=base_fig)
])

@callback(
    Output('scatter-graph', 'figure'),
    Input('color_switch', 'on'),
    Input('size_switch', 'on')
)
def update_graph(color_on, size_on):
    # 每次更新都基于基础图形修改，避免状态残留
    fig = base_fig.copy()
    # 处理颜色切换
    fig.update_traces(marker=dict(
        color='red' if color_on else px.colors.qualitative.Plotly[0]
    ))
    # 处理大小切换
    fig.update_traces(marker=dict(
        size=12 if size_on else 6
    ))
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

二、用dmc.Button实现组合状态切换 #

如果非要用按钮，因为按钮本身没有内置开关状态，需要用dcc.Store来存当前的颜色/大小激活状态，点击按钮时翻转对应状态，再根据状态更新图形：

import dash
from dash import dcc, html, Input, Output, State, callback
import plotly.express as px
from dash_mantine_components import Button, Group

app = dash.Dash(__name__)

df = px.data.iris()
base_fig = px.scatter(df, x="sepal_width", y="sepal_length")

app.layout = html.Div([
    Group([
        Button("切换颜色", id='color-btn', variant="outline"),
        Button("切换大小", id='size-btn', variant="outline")
    ]),
    # 存储颜色、大小的开关状态
    dcc.Store(id='graph-state', data={'color_active': False, 'size_active': False}),
    dcc.Graph(id='scatter-graph', figure=base_fig)
])

# 颜色按钮：翻转颜色状态
@callback(
    Output('graph-state', 'data'),
    Input('color-btn', 'n_clicks'),
    State('graph-state', 'data'),
    prevent_initial_call=True
)
def toggle_color(_, state):
    state['color_active'] = not state['color_active']
    return state

# 大小按钮：翻转大小状态（注意allow_duplicate=True，允许多个回调修改同一个Store）
@callback(
    Output('graph-state', 'data', allow_duplicate=True),
    Input('size-btn', 'n_clicks'),
    State('graph-state', 'data'),
    prevent_initial_call=True
)
def toggle_size(_, state):
    state['size_active'] = not state['size_active']
    return state

# 根据存储的状态更新图形
@callback(
    Output('scatter-graph', 'figure'),
    Input('graph-state', 'data')
)
def update_graph(state):
    fig = base_fig.copy()
    fig.update_traces(marker=dict(
        color='red' if state['color_active'] else px.colors.qualitative.Plotly[0],
        size=12 if state['size_active'] else 6
    ))
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

关键注意事项 #

• 所有组件ID必须唯一，回调的输入输出要对应正确的ID；
• 用按钮时必须额外存状态，不能只靠点击次数判断（多次点击需要翻转状态）；
• 更新图形时基于基础图形复制修改，避免之前的状态残留。

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