簡體   English   中英

plotly 破折號:回調更新數據表靜默失敗

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM