单击破折号中的按钮后从数据框中填充 dash_table

Question

我已经开始查看 dash/plotly 并且不知道我做错了什么。我想通过回调将 div 更新为 dash_table。数据来自 pandas dataframe/db 查询

我试着trim把代码降到最低

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input, State

import datetime
import re
import pandas as pd

import plotly.graph_objects as go

app = dash.Dash()

app.layout = html.Div(children=[html.Div("Dashboard",
                                     style={"color": "white", "text-align": "center", "background-color": "blue", "display": "inline-block", "width": "100%", "font-size": "46px",
                                            }),
                            dcc.Tabs([
                                dcc.Tab(label='Upcoming events',
                                        children=[
                                            html.Div("Select a period: ",
                                                    style={"text-align": "center"}),
                                            html.Div(
                                                dcc.DatePickerRange(
                                                    id="calendar_period",
                                                    start_date_placeholder_text="Start Period",
                                                    end_date_placeholder_text="End Period",
                                                    start_date=datetime.datetime.today(),
                                                    end_date=datetime.datetime.today(),),
                                                style={"text-align": "center"}
                                            ),
                                            html.Div(
                                                html.Button("Retrieve calendar", id="submit_period", n_clicks=0),
                                                style={"text-align": "center"}
                                            ),
                                            html.H1(id='calendar_table'),
                                        ]),
                                dcc.Tab(label='Some other tab',)
                                ])
                            ])


@app.callback(
[Output('calendar_table', 'children')],
[Input('calendar_period', 'start_date'), Input('calendar_period', 'end_date')],
[State('submit_period', 'n_clicks')])

def retrieve_calendar(start_date, end_date, n_clicks):
    events = pd.read_sql_query(...) #<- query based on start_date and end_date both in date format
    columns = [{"name": i, "id": i, } for i in events.columns]
    df_data = events.to_dict('rows')


    return dash_table.DataTable(data=df_data, columns=columns)


if __name__ == '__main__':
    app.run_server(debug=True)

当运行文件并转到 127.0.0.1:8050 时，我有我的日期范围选择器并且可以 select 日期。我确实在 python 中检索到了正确的日期。但是当我点击按钮时，什么也没有发生。我在几秒钟内用各种 start/end 日期和数据库查询 returns 数据帧进行了一些试验。我也试过

Input('submit_period', 'n_clicks')

但也没有弹出任何内容。

编辑：我收到以下错误消息：

回调..calendar_table.children..是一个多输出。

有点混乱，因为我的回调只定义了一个输出：

Output('calendar_table', 'children')

我还补充了：

def retrieve_earnings(start_date, end_date, n_clicks):
    events = pd...
                    
    print(events.head())
    columns = [{"name": i, "id": i, } for i in events.columns]
    print(columns)
    df_data = events.to_dict('records')
    print(df_data)

    return dash_table.DataTable(data=df_data, columns=columns)

我得到了两次

Empty DataFrame

并且在启动编程后大约 5 秒后（减去 select 日期范围的时间）打印（events.head()）在 [=47 中显示正确的数据=] 控制台，但仍然有相同的多输出错误，并且没有数据 table 显示在 127.0.0.1

上

Edit2：我将 submit_period 按钮的状态切换为输入并返回 [dash_table.DataTable(...)]，这似乎起到了“把戏”的作用，但在这种情况下，提交按钮是没用...

Answer 1

您的回调将输出定义为长度为 1 的列表。Dash 认为这是一个 multi-output 回调。删除方括号 ([, ]) 并只给它 Output()。这应该可以解决您的错误。

单击破折号中的按钮后从数据框中填充 dash_table

Populate a dash_table from a dataframe after clicking a button in dash

python

plotly

plotly-dash