[英]plotly dash: callback to update data-table silently failing
我在屏幕上顯示了一個數據表,並且我構建了一個小下拉菜單,因為我想根據在此小部件上選擇的值過濾表。 雖然沒有輸出錯誤,但表不會更新。 它只是保持不變。 我已關注此帖子以尋求幫助Plotly Dash table callback 。 我覺得我非常接近,但無法弄清楚出了什么問題。
到目前為止,這是我能夠做到的: 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])
]
)
這是日志中的錯誤output:
forecast = forecast[forecast['Id'] == 'name']
TypeError: 'NoneType' object is not subscriptable
如果有人能幫我找出為什么表格沒有更新,我將不勝感激?
我猜您沒有看到錯誤,因為您已將suppress_callback_exceptions
設置為True
。
您的回調的問題在於您的 output 看起來像這樣:
Output('table', 'figure')
table
是一個DataTable
並且沒有屬性figure
。
你可以做的是用 div 包圍表格,讓我們調用這個table-container
並將回調中的 output 更改為:
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
數據集並稍微更改了過濾器,因為我不知道您的數據是什么樣的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.