在破折号绘图回调中包含全选功能 - python

Question

我有一个条形图，它连接到回调以允许过滤。使用下面的方法，在Type列上完成过滤。

问题：我实际过滤的真实数据包含数千个项目。我想最初显示所有数据，但不想在下拉栏中将其可视化（因为太多）。因此，我的目标是加入“全选”功能。 查询：初始阶段确实显示所有值，但缺少

全选

标签。因此，我可以在之前清除全选选择单个项目。期望的目标是清除全选，然后选择一个单独的类型。同样，如果我从单个类型或类型组合开始并且激活了全选，则应删除所有单个类型来代替全选。

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

df = pd.DataFrame({
       'Type': ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
       })

N = 300
df = pd.concat([df] * N, ignore_index=True)

df['TIMESTAMP'] = pd.date_range(start='2024/01/01 07:36', end='2024/01/30 08:38', periods=len(df))

df['DATE'], df['TIME'] = zip(*[(d.date(), d.time()) for d in df['TIMESTAMP']])
df['DATE'] = pd.to_datetime(df['DATE'], format='%Y-%m-%d')


external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

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


filter_box = html.Div(children=[
    html.Div(children=[
        dcc.Dropdown(
            id = 'Type',
            options = [
                {'label': x, 'value': x} for x in df['Type'].unique()
            ] + [
                {'label': 'Select All', 'value': 'all'}
            ],
            value = 'all',
            multi = True,
            clearable = True,
            style = {'display': 'inline-block','margin':'0.1rem'}
        ),       
    ], className = "vstack gap-1 h-100",            
    )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Row([
                dbc.Col(html.Div(filter_box), 
                        ),
            ]),
        ]),
        dbc.Col([
            dbc.Row([
                dcc.Graph(id = 'date-bar-chart'),
            ]),
        ])
    ])
], fluid = True)

@app.callback(
    Output('date-bar-chart', 'figure'),
    [Input('Type', 'value'), 
    ])     

def chart(value_type):

    if value_type == 'all':
        dff = df

    elif value_type == ['all']:
        dff = df

    else:
        dff = df[df['Type'].isin(value_type)]

    df_count = dff.groupby(['DATE','Type'])['DATE'].count().reset_index(name = 'counts')

    if df_count.empty == True:
        type_fig = go.Figure()

    else:
        df_count = df_count

        type_fig = px.bar(x = df_count['DATE'], 
                      y = df_count['counts'],
                      color = df_count['Type']
                      )

    return type_fig

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

Answer 1

dcc.Dropdown

声明进行一些更改，以确保您看到全选。首先，您已将“全选”字典附加到

options

参数列表的末尾，而不是开头。您可能需要将其移至开头以确保它显示。根据

文档

：

作为单个字典提供的选项在浏览器中不按特定顺序呈现。提供包含每个选项的字典的列表可确保选项按提供的顺序呈现。

其次，您将

dcc.Dropdown

的

value

参数配置为

value = 'Select All'

，但文档中的示例表明应将其设置为相应字典的

value

，而不是键：

dcc.Dropdown(
   options=[
       {'label': 'New York City', 'value': 'NYC'},
       {'label': 'Montreal', 'value': 'MTL'},
       {'label': 'San Francisco', 'value': 'SF'},
   ],
   value='MTL'
)

因此，您可能还想尝试将其更改为

value = 'all'

。总结一下：

    dcc.Dropdown(
        id = 'Type',
        options = [
            {'label': 'Select All', 'value': 'all'}
        ] + [
            {'label': x, 'value': x} for x in df['Type'].unique()
        ],
        value = 'all',
        multi = True,
        clearable = True,
        style = {'display': 'inline-block','margin':'0.1rem'}
    ),