plotly dash:更新数据表的回调失败

Question

我在屏幕上显示了一个数据表，我建立了一个小下拉菜单，因为我想根据这个小部件上选择的值过滤表。虽然没有输出错误，但表不会更新。它只是保持不变。我跟随这篇文章寻求Plotly Dash表回调的帮助。我觉得我离得很近，但不知道哪里出了问题。

以下是我到目前为止所能做的:html代码:

app.layout = html.Div(children=[

html.Br(),
html.Br(),
html.Br(),

#,style={'border':'solid 0.1em','border-color': 'transparent transparent #ff5402','font-size':'1em', 'color':'#ff5402'}),

html.Div(children=[
html.Div(
html.Div(html.H1("Demand planning"),

className="col-sm-12 inline-block")),
html.Br(),



html.Br(),
html.Div(children=[

html.Div([
dcc.Dropdown(
id='item',
options=[{'label': name, 'value': name} for name in available_items],
value='choose an item')

]),


html.Br(),



html.Div(children=[

html.Br(),

html.Div(children=[
html.Div(html.H4("Forecast"),style={'padding-left':10}),

dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in forecast.columns],
style_cell={'whiteSpace': 'normal','height': 'auto',},
data=forecast.to_dict('rows'),
sort_action='native',
filter_action='none',
export_format='csv',

page_action = 'native',
page_current = 0,
page_size = 10,
style_cell_conditional = [

{'if': {'column_id': 'Id'},
'width': '30%', 'textAlign':'left'},
{'if': {'column_id': 'QuantityMin'},
'width': '30%', 'textAlign':'left'},
{'if': {'column_id': 'QuantityMax'},
'width': '30%', 'textAlign':'left'},
{'if': {'column_id': 'Probability'},
'width': '30%', 'textAlign':'left'},

],
style_data_conditional=[
{'backgroundColor': 'rgba(0, 0, 0,0)'}],
style_header={'backgroundColor': 'rgb(230, 230, 230)','font-size' : '10px'})

],  


className= "mx-auto justify-content-left", style={'display': 'inline-block', "width":800,"height":475,"margin": 5}),##ca va avec le children du datatable


],className="row justify-content-center",style={'display': 'flex','align': 'center','heigh':475,'textAlign': 'center','border':'solid 0.05em','border-color': 'lightgray'}
), #celui la cest celui au dessus du Br()




],className='container', style={'padding-top':10, 'padding-bottom':50}), #ca c;est le children entre les deux br


])

])

和回调

@app.callback(
Output('table-container', 'children'),
[Input('item', 'name')],)
def update_figure(forecast):
print('name')
forecast = forecast[forecast['Id'] == 'name']
print(forecast)


return html.Div(
[
dash_table.DataTable(id='table', columns=[{'id': name, 'value': name} for name in forecast.columns.values])
]
)

下面是日志中的错误输出:

forecast = forecast[forecast['Id'] == 'name']
TypeError: 'NoneType' object is not subscriptable

如果有人能帮我找出为什么表没有更新，我将不胜感激。

Answer 1

我猜您没有看到错误，因为您将suppress_callback_exceptions设置为True。

你的回调的问题是你的输出看起来像这样:

Output('table', 'figure')

table是DataTable，没有figure的性质。

你可以做的是用一个div包围表格，让我们把它命名为table-container，并在回调中改变输出:

Output("table-container", "children")

调整布局:

app.layout = html.Div(
children=[
html.Br(),
html.Br(),
html.Br(),
# ,style={'border':'solid 0.1em','border-color': 'transparent transparent #ff5402','font-size':'1em', 'color':'#ff5402'}),
html.Div(
children=[
html.Div(
html.Div(
html.H1("Demand planning"), className="col-sm-12 inline-block"
)
),
html.Br(),
html.Br(),
html.Div(
children=[
html.Div(
[
dcc.Dropdown(
id="item",
options=[
{"label": name, "value": name}
for name in available_items
],
value="choose an item",
)
]
),
html.Br(),
html.Div(
children=[
html.Br(),
html.Div(
children=[
html.Div(
html.H4("Forecast"),
style={"padding-left": 10},
),
html.Div(
id="table-container",
children=[
dash_table.DataTable(
id="table",
columns=[
{"name": i, "id": i}
for i in forecast.columns
],
style_cell={
"whiteSpace": "normal",
"height": "auto",
},
data=forecast.to_dict("rows"),
sort_action="native",
filter_action="none",
export_format="csv",
page_action="native",
page_current=0,
page_size=10,
style_cell_conditional=[
{
"if": {"column_id": "Id"},
"width": "30%",
"textAlign": "left",
},
{
"if": {
"column_id": "QuantityMin"
},
"width": "30%",
"textAlign": "left",
},
{
"if": {
"column_id": "QuantityMax"
},
"width": "30%",
"textAlign": "left",
},
{
"if": {
"column_id": "Probability"
},
"width": "30%",
"textAlign": "left",
},
],
style_data_conditional=[
{
"backgroundColor": "rgba(0, 0, 0,0)"
}
],
style_header={
"backgroundColor": "rgb(230, 230, 230)",
"font-size": "10px",
},
),
],
),
],
className="mx-auto justify-content-left",
style={
"display": "inline-block",
"width": 800,
"height": 475,
"margin": 5,
},
),  ##ca va avec le children du datatable
],
className="row justify-content-center",
style={
"display": "flex",
"align": "center",
"heigh": 475,
"textAlign": "center",
"border": "solid 0.05em",
"border-color": "lightgray",
},
),  # celui la cest celui au dessus du Br()
],
className="container",
style={"padding-top": 10, "padding-bottom": 50},
),  # ca c;est le children entre les deux br
]
),
]
)

另外，'value'不是columns的有效密钥，我认为您正在寻找'name'。

一个最小的例子，见这里的文档。

---

一个基于输入值过滤DataTable数据的回调的一般示例如下:

@app.callback(
Output("table-container", "children"),
[Input("item", "value")],
)
def update_figure(input_value):
dff = forecast[forecast["species"] == input_value]
return html.Div(
[
dash_table.DataTable(
id="table",
columns=[{"id": name, "name": name} for name in dff.columns.values],
data=dff.to_dict("records"),
)
]
)

在上面的例子中，我设置了forecast等于iris数据集，并稍微改变了过滤器，因为我不知道你的数据是什么样子的。