如何在破折号下拉组件中添加全选选项？

Question

我正在用 plotly dash 构建一个仪表板。 我正在使用 dcc.dropdown，我总共要显示 40 个值。现在，我想在其中添加选择所有选项。

我已经尝试了以下代码，但您必须逐个选择选项，并且它会考虑所有选项。

谁能帮助找出如何一次选择所有值？

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from dash.dependencies import Input, Output, State

import plotly.graph_objs as go
from dash.exceptions import PreventUpdate

xTime=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

listofY=['y1','y2','y3','y4','y5','y6','y7','y8','y9','y10']

Table={
       'y1':[20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17],
       'y2':[19, 18, 22, 14, 15, 19, 15, 14, 14, 21, 16, 16],
       'y3':[11, 14, 21, 16, 16, 10, 15, 11, 10, 12, 11, 16],
       'y4':[14, 10, 27, 14, 16, 14, 15, 18, 14, 12, 12, 16],
       'y5':[16, 15, 22, 18, 18, 19, 15, 13, 15, 12, 18, 17],
       'y6':[18, 17, 25, 14, 16, 11, 13, 14, 20, 14, 12, 18],
       'y7':[11, 14, 22, 14, 13, 19, 15, 17, 14, 12, 17, 19],
       'y8':[13, 14, 20, 14, 16, 17, 15, 14, 10, 13, 14, 20],
       'y9':[15, 15, 22, 15, 11, 13, 15, 14, 11, 14, 12, 22],
       'y10':[10, 11, 22, 14, 16, 21, 15, 14, 10, 12, 11, 16]
       }

app = dash.Dash()

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            id='product-choice',
            options=[{'label': i, 'value': i} for i in listofY], 
            value=['y1', 'y2', 'y5'],
            multi=True
        ),
        html.Div([
            dcc.Checklist(
                id='select-all',
                options=[{'label': 'Select All', 'value': 1}], 
                values=[]
            )
        ], id='checklist-container')
    ]),
    
    html.Div(children=[
        dcc.Graph(
            id='bar-graph-by-model'
        ),
    ]),                
])

@app.callback(
    Output('product-choice', 'value'),
    [Input('select-all', 'values')],
    [State('product-choice', 'options')])
def test(selectALL, options):
    if len(selectALL) > 0:
        return [i['value'] for i in options]
    else:
        raise PreventUpdate()

@app.callback(
    Output('checklist-container', 'children'),
    [Input('product-choice', 'value')],
    [State('product-choice', 'options'),
     State('select-all', 'values')])
def tester(chosenValues, availableChoices, selectALL):
    
    if len(chosenValues) < len(availableChoices) and len(selectALL) == 0:
        raise PreventUpdate()

    elif len(chosenValues) < len(availableChoices) and len(selectALL) == 1:
        return  dcc.Checklist(id='select-all',
                    options=[{'label': 'Select All', 'value': 1}], values=[])

    elif len(chosenValues) == len(availableChoices) and len(selectALL) == 1:
        raise PreventUpdate()

    return  dcc.Checklist(id='select-all',
                    options=[{'label': 'Select All', 'value': 1}], values=[1])  
    
        
@app.callback(
        Output('bar-graph-by-model', 'figure'),
        [Input('product-choice', 'value')]
)
def updategraph(value):
    traces=[]
    for i in value:
        x=xTime
        ytemp=Table[i]
        traces.append(go.Bar(
            x=x,
            y=ytemp,
            name=i,
        ))
    return {
        'data': traces,
        'layout': go.Layout(
            )
   }
        
if __name__ == '__main__':
   app.run_server(debug=True, port=8051)

Answer 1

您需要将第 41 行从 values=[] 更改为 value=[]。没有它，你会得到错误

TypeError: The `dash_core_components.Checklist` component (version 1.16.0) with the ID "select-all" received an unexpected keyword argument: `values`
Allowed arguments: className, id, inputClassName, inputStyle, labelClassName, labelStyle, loading_state, options, persisted_props, persistence, persistence_type, style, value

您发布的代码与“David22”在 2019 年 4 月在 https://community.plotly.com/t/adding-a-select-all-button-to-a-multi-select-dropdown/8849/6 中发布的代码相同。

该代码已经修复了我上面提到的问题。它也有评论不起作用的解决方法。您发布的代码似乎没有注释，这会导致另一个错误。

https://github.com/plotly/dash-core-components/issues/133 中提到了该修复程序

顺便说一句：我不知道您是否从那里获取了此代码，或者这可能是很多人共享的通用代码，但最好在代码中提供参考链接作为注释。确认您是否从某个地方获得了代码是一个很好的做法。