[英]Dash dcc.Dropdown issue with clear all
So, I have this very simplified Dash app example.所以,我有这个非常简化的 Dash 应用程序示例。 Code is below:
代码如下:
import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
from dash.dependencies import Input, Output
data = {'Fruits': ['apple', 'orange', 'banana'], 'Number': [10, 15, 7]}
df = pd.DataFrame(data, columns=['Fruits', 'Number'])
fruits_options = df['Fruits']
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Fruits Bar Chart'),
html.Div([
dcc.Dropdown(
id='dropdown',
options=[{'label': i, 'value': i} for i in fruits_options],
value='All Fruits',
multi=True
),
html.Div(dcc.Graph(id='graph')),
]),
])
@app.callback(
Output(component_id='graph', component_property='figure'),
Input(component_id='dropdown', component_property='value')
)
def update_graph(fruits):
if 'All Fruits' in fruits:
dff = df.copy()
else:
dff = df[df['Fruits'].isin(fruits)]
figure = px.bar(dff, x=dff['Fruits'], y=dff['Number'])
return figure
if __name__ == '__main__':
app.run_server(debug=True)
User can select multiple options and they will appear on the chart but when the user chose to clear all
(x on the right side) it shows this error:用户可以 select 多个选项,它们会出现在图表上,但是当用户选择
clear all
(右侧的 x)时,它会显示此错误:
ValueError: Cannot accept list of column references or list of columns for both `x` and `y`.
Does anyone have a suggestion on how to fix this?有没有人有关于如何解决这个问题的建议? Also, If possible I would like to return to the initial state of the chart when clear all is selected.
另外,如果可能,我想在选择全部清除时返回图表的初始 state。
Thanks in advance.提前致谢。
The remove the error, you need to handle the case where fruits
is an empty list.删除错误,您需要处理
fruits
是一个空列表的情况。 It could be as simple as replacing the它可以像更换
'All Fruits' in fruits
condition by条件由
not fruits or 'All Fruits' in fruits
Since not fruits
evaluates to True
when the fruits
variable is an empty list and your initial state was 'All Fruits'
, this simple change should yield the desired outcome.由于当
fruits
变量是一个空列表并且您的初始 state 是'All Fruits'
时not fruits
评估为True
,所以这个简单的更改应该会产生预期的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.