将全选功能合并到单个组件中 - 绘图破折号

Question

关于添加“全选”选项以使用绘图破折号过滤具有大量值的数据的问题存在一些问题。下面的链接列表执行该功能，但它将每个值添加到下拉栏中。而不是代表“所有”值的单个选项卡或组件。这使得应用程序布局无法工作，因为页面充满了下拉栏中的值。 如果可以使用单个标签（全部/全选等）来代替列出所有单独的值，那将是有建设性的。

Python Plotly Dash 下拉列表为散点图添加“全选”

使用下面的方法，当选择全选时，每个值都会出现在下拉栏中。理想情况下，当选择 select all 时，下拉栏应仅显示

select all

标签，而所有数据均应可见。

此外，如果

select all

作为单个选项卡存在并且用户想要查看唯一的 ID，则应删除该 id 的

select all

。相反，如果操作了唯一 id 并执行了

select all

，则应为单个

select all

选项卡删除该唯一 id。这应该一步完成。不是两个步骤，您需要在选择后续选项之前清除栏。

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_mantine_components as dmc
import pandas as pd
import plotly.express as px
import numpy as np
import random
from string import ascii_letters

df = pd.DataFrame(data=list(range(100)), columns=["tcd"])
df['humidity'] = pd.DataFrame(np.random.rand(100, 1) * 254)
df['Capsule_ID'] = [''.join(random.choice(ascii_letters) for x in range(10)) for _ in range(len(df))]

capsuleID = df['Capsule_ID'].unique()
capsuleID_names = list(capsuleID)

capsuleID_names_1 = [{'label': k, 'value': k } for k in sorted(capsuleID)]
capsuleID_names_2 = [{'label': '(Select All)', 'value': 'All'}]
capsuleID_names_all = capsuleID_names_1 + capsuleID_names_2


app = dash.Dash(__name__)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

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

    dcc.Dropdown(id="capsule_select",
             options=capsuleID_names_all,
             optionHeight=25,
             multi=True,
             searchable=True,
             placeholder='Please select...',
             clearable=True,
             value=[''],
             style={'width': "40%"}
             ),
    html.Div([
        dcc.Graph(id="the_graph")
    ]),

])

@app.callback(
    Output("the_graph", "figure"),
    Output("capsule_select", "value"),
    Input("capsule_select", "value"),
)
def update_graph(capsules_chosen):
    dropdown_values = capsules_chosen

    if "All" in capsules_chosen:
        dropdown_values = df["Capsule_ID"]
        dff = df
    else:
        dff = df[df["Capsule_ID"].isin(capsules_chosen)]

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

    scatterplot.update_traces(textposition="top center")

    return scatterplot, dropdown_values 

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

您可以修改回调，以便当用户从下拉列表中选择

(Select All)

Answer 1

@app.callback(
    Output("the_graph", "figure"),
    Output("capsule_select", "value"),
    Input("capsule_select", "value"),
)
def update_graph(capsules_chosen):
    dropdown_values = capsules_chosen

    if "All" in capsules_chosen:
        dff = df
    else:
        dff = df[df["Capsule_ID"].isin(capsules_chosen)]

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

    scatterplot.update_traces(textposition="top center")

    return scatterplot, dropdown_values