带有一个下拉列表和多个选择器的 Plotly Dash 散点图（全部）

Posted 2023-03-22

【中文标题】带有一个下拉列表和多个选择器的 Plotly Dash 散点图（全部）

【英文标题】：Plotly Dash Scatterplot with one dropdown and multiple selector (all)

【发布时间】：2021-10-28 10:25:02

【问题描述】：

我正在尝试使用一个下拉选择器创建散点图，并希望选择器能够选择多个胶囊和所有胶囊的默认设置。

我知道必须首先将 multi 设置为 True，并且必须调整回调以更新每个后续更改或添加胶囊的图表。我很难找到一种合适的方法来更改代码，以便我可以选择多个胶囊甚至整个胶囊数据集。我还创建了一个唯一胶囊 ID 的列表，并将其用作下拉列表，这样就可以了。

数据看起来像这样。

Dash 看起来像这样。

我在 pycharm 上运行的代码。

import pandas as pd
import plotly.express as px  # (version 4.7.0)
import plotly.graph_objects as go

import dash  # (version 1.12.0) pip install dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

df = pd.read_csv("tcd vs rh.csv")
print(df)

capsuleID = df['Capsule_ID'].unique()
print(capsuleID)

capsuleID_names = list(capsuleID)
print(capsuleID_names)

app.layout = html.Div([

    html.H1("Web Application Dashboards with Dash", style='text-align': 'center'),

    dcc.Dropdown(id="capsule_select",
                 options=["label": capsuleID_names, "value": capsuleID_names for capsuleID_names in capsuleID_names],
                 multi=True,
                 value=2100015,
                 style='width': "40%"
                 ),

    html.Div([
        dcc.Graph(id="the_graph")
    ]),

])


# -----------------------------------------------------------
@app.callback(
    Output('the_graph', 'figure'),
    [Input('capsule_select', 'value')]
)
def update_graph(capsule_chosen):
    dff = df[(df['Capsule_ID'] == capsule_chosen)]  # filter all rows where capsule ID is the capsule ID selected

    scatterplot = px.scatter(
    data_frame=dff,
    x="tcd",
    y="humidity",
              )

    scatterplot.update_traces(textposition='top center')

    return scatterplot


# ------------------------------------------------------------------------------

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

【参考方案1】：

首先，当使用multi=True 时，我会将您为下拉菜单设置的默认值从2100015 更改为[2100015]。

这样我们就可以依赖value 属性始终是一个列表这一事实。

您当前在回调中的过滤器逻辑仅适用于单个值：

dff = df[(df["Capsule_ID"] == capsule_chosen)]

你可以使用pandas.Series.isin:

dff = df[(df["Capsule_ID"].isin(capsules_chosen))]

注意：在上面给出的示例中，我已将回调参数从 capsule_chosen 更改为 capsules_chosen，以更好地反映此变量包含值列表这一事实。

更新

如果您想从选择所有值开始，您只需将初始下拉列表 value 设置为您的 Capsule_ID 列：

value=df["Capsule_ID"]

要创建“全选”功能，您可以创建一个按钮或其他触发元素并将此元素添加到布局中：

html.Button("select all", id="select-all", n_clicks=0),

并像这样创建回调：

@app.callback(Output("capsule_select", "value"), Input("select-all", "n_clicks"))
def select_all(n_clicks):
    return df["Capsule_ID"]

【讨论】：

嗨，巴斯，感谢您的帮助！有用！我想知道是否有一种方法可以先选择所有胶囊。甚至可以选择“全选”。谢谢你:)

@haroldchoi 查看我的更新答案。顺便说一句，除了接受答案之外，您现在还可以在您超过 15 个声望点的门槛时为答案投票。