Plotly Dash 函数切换图形参数 - python

Question

我正在尝试安装一个提供开关或切换来更改绘图的功能。使用下面的内容，我有一个散点图和两个旨在更改点的颜色和大小的按钮。

这些按钮应用于同一个散点图。我可以在颜色或尺寸上单独使用

daq.BooleanSwitch

，但我不能在相同的两个上同时使用它们，因为两次调用

id

会引发错误。

两个人可以用一个按钮代替吗？它可以打开或关闭每个参数。我不需要下拉栏或不同的按钮，因为图表应该能够保存两个按钮的组合（开/关）。

目前，按钮已就位，但它们不会改变图表的颜色或大小。

import dash
import dash_daq as daq
from dash import dcc, html
import dash_mantine_components as dmc
from dash.dependencies import Input, Output
import plotly.express as px
import plotly.graph_objs as go
import pandas as pd

df = px.data.iris()

color_dict = {'setosa':'green', 'versicolor':'yellow', 'virginica':'red'}
colormap = df["species"].map(color_dict)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.P("Color"),
        #daq.BooleanSwitch(id="color_toggle", on=False, color="red"),
        dmc.Button('Color', id="color_toggle", variant="light"),
        html.P("Size"),
        #daq.BooleanSwitch(id="size_toggle", on=False, color="red"),
        dmc.Button('Size', id="size_toggle", variant="light"),
        html.Div(
            dcc.Graph(id="chart"), 
            #id="power-button-result-1", 
            #id="power-button-result-2"
        ),
    ]
)

@app.callback(
    Output("chart", "figure"),
    #Output("power-button-result-1", "children"),
    #Output("power-button-result-2", "children"),
    [
    Input("color_toggle", "value"),
    Input("size_toggle", "value"),
    ]
)
def update_output(color_on, 
                  size_on,
                  ):

    if color_on:
            fig = px.scatter(df, x="sepal_width", y="sepal_length", color = colormap)
            #dcc.Graph(figure=fig)
            #return [dcc.Graph(figure=fig)]
    else:
            fig = px.scatter(df, x="sepal_width", y="sepal_length")
            #return [dcc.Graph(figure=fig)]
    
    if size_on:
            fig = px.scatter(df, x="sepal_width", y="sepal_length", size = 'sepal_length')
            #dcc.Graph(figure=fig)
            #return [dcc.Graph(figure=fig)]
    else:
            fig = px.scatter(df, x="sepal_width", y="sepal_length")
            #return [dcc.Graph(figure=fig)]
    
    return fig


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

Answer 1

看来您需要

Size

和

Color

的切换开关。

在这种情况下，您可以在 html 中利用

dcc.checklist()

并设置其样式。

此代码很可能有效，运行它并查看：

app.layout = html.Div(
    [
        html.P("Toggle for the Color"),
        dcc.Checklist(
            id="color_toggle",
            options=[{"label": "", "value": True}],
            value=[],
            inline=True
        ),
        html.P("Toggle for the Size"),
        dcc.Checklist(
            id="size_toggle",
            options=[{"label": "", "value": True}],
            value=[],
            inline=True
        ),
        html.Div(
            dcc.Graph(id="chart"),
        ),
    ]
)

那么你就不需要

if

中的

else

和

update_output()

语句。为此，您只需调用

update_traces()

方法即可。

    if color_on:
        fig.update_traces(marker=dict(color=colormap))

    if size_on:
        fig.update_traces(marker=dict(size=10))

代码

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

df = px.data.iris()
color_dict = {'setosa': 'green', 'versicolor': 'yellow', 'virginica': 'red'}
colormap = df["species"].map(color_dict)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.P("Toggle for the Color"),
        dcc.Checklist(
            id="color_toggle",
            options=[{"label": "", "value": True}],
            value=[],
            inline=True
        ),
        html.P("Toggle for the Size"),
        dcc.Checklist(
            id="size_toggle",
            options=[{"label": "", "value": True}],
            value=[],
            inline=True
        ),
        html.Div(
            dcc.Graph(id="chart"),
        ),
    ]
)


@app.callback(
    Output("chart", "figure"),
    [Input("color_toggle", "value"), Input("size_toggle", "value")]
)
def update_output(color_on, size_on):
    fig = px.scatter(df, x="sepal_width", y="sepal_length")

    if color_on:
        fig.update_traces(marker=dict(color=colormap))

    if size_on:
        fig.update_traces(marker=dict(size=10))

    return fig


if __name__ == "__main__":
    app.run_server(debug=False)