破折号 dcc.Dropdown 清除所有问题

Question

所以，我有这个非常简化的 Dash 应用程序示例。代码如下：

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)

用户可以 select 多个选项，它们将出现在图表上，但是当用户选择 clear all（右侧的 x）时，它会显示此错误：

ValueError: Cannot accept list of column references or list of columns for both `x` and `y`.

有人对如何解决这个问题有建议吗？另外，如果可能的话，我想 return 在清除所有 selected 时回到图表的初始状态。

提前致谢。

Answer 1

去除错误，需要处理fruits为空列表的情况。它可以像替换

一样简单

'All Fruits' in fruits

条件

not fruits or 'All Fruits' in fruits

由于当 fruits 变量为空列表且您的初始状态为 'All Fruits' 时 not fruits 的计算结果为 True，因此这个简单的更改应该会产生所需的结果。

破折号 dcc.Dropdown 清除所有问题

Dash dcc.Dropdown issue with clear all

python

drop-down-menu

plotly-dash