plotly - 在 Plotly/Dash 下拉列表中添加 'Select All' 选项

Question

我是 Plotly/Dash 的新手，目前正在努力为我的下拉菜单添加“全选”选项，尤其是在回调时。请帮忙，坚持了一段时间。

app = dash.Dash(__name__)

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

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

all = df.Pillar.unique()

options=[{'label':x , 'value':x} for x in all]
options.append({'label': 'Select All', 'value': "all"})

app.layout=html.Div([
    html.H1("PRO Project Management dashboard"),
    
        html.Div([
        html.P('Pillar'),
        dcc.Dropdown(id='pillar-choice', options=[{'label':x , 'value':x} for x in all] + [{'label':'Select All' , 'value':'all'}] , value= 'for', multi=True),
    ]),
        
       
    html.Div([
            dcc.Graph(id='graph1', style={'display':'inline-block', 'width' :'33%'})
        
    ]),
    
])

@app.callback(
    Output(component_id='graph1', component_property='figure'),
    Input(component_id='pillar-choice', component_property='value') 
)

def update_graph1(value_pillar):
    if value_pillar == 'all':
        dff = df
    else:
        dff = df[df.Pillar.isin([value_pillar])]
        fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
        return fig
    
    
if __name__=='__main__':
    app.run_server()

Answer 1

您的下拉菜单使用了特定列中的所有值，例如:

dcc.Dropdown(id='pillar-choice', options=[{'label':x, 'value':x}] for x in all, value=all, multi=True)

要获得“全选”选项，您需要另一个值，您的代码可以将其识别为与列中存在的值不同。这样的事情应该有效:

dcc.Dropdown(
    id='pillar-choice', 
    options=[{'label':x, 'value':x} for x in all] + [{'label': 'Select all', 'value': 'all_values'], 
    value='all_values',  
    multi=True,
)

然后，在您的回调逻辑中，您可以包含如下内容:

@app.callback(
    Output('whichever-graph-this-goes-to', 'figure'),
    [
        Input('pillar-choice', 'value')
        # whatever other inputs
    ]
)
def my_callback(pillar_dropdown, whatever_other_args):
    if pillar_dropdown == 'all_values':
        dff = df
    else:
        dff = df[df['Pillar'].eq(pillar_dropdown)]
    # rest of callback logic

编辑:我让它在本地工作。现在回调对我来说是这样的:

@app.callback(
    dash.dependencies.Output(component_id='graph1', component_property='figure'),
    [
        dash.dependencies.Input(component_id='pillar-choice', component_property='value')
    ]
)
def update_graph1(value_pillar):
    if value_pillar == ['all']:
        dff = df
    else:
        dff = df[df.Pillar.isin(value_pillar)]

    fig = px.pie(
        data_frame=dff,
        names='Pillar',
        values='Project No',
        title='Number of Projects by Pillars'
    )
    return fig

以下是我所做的更改:

1. Input 包含在列表中。
2. 第一个条件现在包含在一个列表中。这很重要，因为下拉列表设置为 multi=True，因此它应该始终返回一个值列表。我也将下拉列表的默认 值 更改为列表。
3. 传递给 .isin() 的值不再用括号括起来，因为它已经是一个列表。
4. fig 对象的创建是在条件语句之外完成的，因此无论执行哪个条件路径都会发生。