plotly dash: 更新数据的回调-table 静默失败
plotly dash: callback to update data-table silently failing
我在屏幕上显示了一个数据-table，并且我构建了一个小下拉菜单，因为我想根据在此小部件上选择的值过滤 table。虽然没有错误输出，但 table 不会更新。它只是保持不变。我已按照此 post 寻求帮助 。我觉得我超级接近，但不知道哪里出了问题。
这是我到目前为止能够做的事情：
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
如果有人能帮我找出 table 没有更新的原因，我将不胜感激？
我猜您没有看到错误，因为您将 suppress_callback_exceptions 设置为 True。
您的回调的问题在于您的输出如下所示：
Output('table', 'figure')
table 是一个 DataTable 并且没有 属性 figure.
你可以做的是用 div 包围 table，我们称它为 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'。
有关最小示例，请参阅文档 here。
关于如何根据输入值过滤 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 数据集并稍微更改了过滤器，因为我不知道您的数据是什么样的。
我在屏幕上显示了一个数据-table，并且我构建了一个小下拉菜单，因为我想根据在此小部件上选择的值过滤 table。虽然没有错误输出，但 table 不会更新。它只是保持不变。我已按照此 post 寻求帮助
这是我到目前为止能够做的事情： 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
如果有人能帮我找出 table 没有更新的原因，我将不胜感激？
我猜您没有看到错误，因为您将 suppress_callback_exceptions 设置为 True。
您的回调的问题在于您的输出如下所示：
Output('table', 'figure')
table 是一个 DataTable 并且没有 属性 figure.
你可以做的是用 div 包围 table，我们称它为 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'。
有关最小示例，请参阅文档 here。
关于如何根据输入值过滤 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 数据集并稍微更改了过滤器，因为我不知道您的数据是什么样的。