如何在短划线下拉组件中添加全选选项

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〃；在里面https://community.plotly.com/t/adding-a-select-all-button-to-a-multi-select-dropdown/8849/62019年4月。

该代码已经修复了我上面提到的问题。它还有一个不起作用的变通方法。您发布的代码似乎已取消注释，这会导致另一个错误。

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

题外话：我不知道你是否已经从那里获得了这段代码，或者这是一段很多人共享的通用代码，但最好在代码中有引用链接作为注释。这是一个很好的做法，如果你从某个地方得到了代码。