python - 从回调 Plotly Dash 设置列名

Question

我正在尝试创建一个数据表，该表显示来自核心表 (df) 的聚合结果。为此，我使用 Pandas、Dash 和 Plotly，如下所示：

import pandas as pd
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash_html_components import Div
from dash_table import DataTable
from dash.dependencies import Input, Output

df = pd.DataFrame([['1', '2021-01-31', 'category_1', 20],
                   ['1', '2021-01-31', 'category_3', 12],
                   ['1', '2021-02-28', 'category_1', 35],
                   ['1', '2021-02-28', 'category_2', 17],
                   ['1', '2021-02-28', 'category_3', 35],
                   ['1','2021-03-31', 'category_1', 12],
                   ['1','2021-03-31', 'category_2', 58],
                   ['1','2021-03-31', 'category_3', 23],
                   ['2', '2021-01-31', 'category_1', 29],
                   ['2', '2021-01-31', 'category_2', 66],
                   ['2', '2021-01-31', 'category_3', 22],
                   ['2', '2021-02-28', 'category_1', 53],
                   ['2', '2021-02-28', 'category_2', 71],
                   ['2', '2021-02-28', 'category_3', 32],
                   ['2','2021-03-31', 'category_1', 19],
                   ['2','2021-03-31', 'category_2', 2],
                   ['2','2021-03-31', 'category_3', 99],
                   ['3', '2021-02-28', 'category_1', 53],
                   ['3', '2021-02-28', 'category_2', 71],
                   ['3','2021-03-31', 'category_1', 19],
                   ['3','2021-03-31', 'category_2', 2],
                   ['3','2021-03-31', 'category_3', 99],
                   ['3','2021-03-31', 'category_4', 39]],
                   columns=['Account', 'Date', 'category', 'Amount'])


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
                        dcc.Input(id="account", type="string", placeholder="Enter Account"),
                        DataTable(id='figure_1',
                        style_cell_conditional=[{'if': {'column_id': c}, 'textAlign': 'center'} for c in [0, 1, 2, 3, 4]],
                        style_as_list_view=True,
                        fill_width=True,
                        style_cell={'font-size': '12px'},
                        style_header={'display': 'none'},
                        style_table={'height': '395px', 'overflowY': 'auto'})])
                                       

@app.callback(dash.dependencies.Output('figure_1',  'data'),
              [dash.dependencies.Input('account', 'value')])

def update_figura_2(account):
    df_query = df[df['Account'] == account].copy()
    df_query = df_query.groupby(['Account', 'Date', 'category']).agg({'Amount': 'sum'}).reset_index().pivot(values='Amount', columns='Date')
    df_query.index =  df.loc[df['Account'] == account, 'category'].copy()
    df_query.fillna(0, inplace=True)
    return df_query.to_dict(orient='records')


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

所以我想得到的输出：

但是，当我运行代码时，我得到一个空的数据框：

我怀疑它必须与回调有关，但我不知道是什么！

我应该在 DataTable 中定义 columns 参数吗？如果是这样，我怎么能得到回调的列？

标签： pythonplotlyplotly-dash

Answer 1

我找到了一种解决方法，您不必像 Derek 的回答那样手动通过它的 html 组件构建表格。

import pandas as pd
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash_html_components import Div
from dash_table import DataTable
from dash.dependencies import Input, Output

df = pd.DataFrame([['1', '2021-01-31', 'category_1', 20],
                   ['1', '2021-01-31', 'category_3', 12],
                   ['1', '2021-02-28', 'category_1', 35],
                   ['1', '2021-02-28', 'category_2', 17],
                   ['1', '2021-02-28', 'category_3', 35],
                   ['1','2021-03-31', 'category_1', 12],
                   ['1','2021-03-31', 'category_2', 58],
                   ['1','2021-03-31', 'category_3', 23],
                   ['2', '2021-01-31', 'category_1', 29],
                   ['2', '2021-01-31', 'category_2', 66],
                   ['2', '2021-01-31', 'category_3', 22],
                   ['2', '2021-02-28', 'category_1', 53],
                   ['2', '2021-02-28', 'category_2', 71],
                   ['2', '2021-02-28', 'category_3', 32],
                   ['2','2021-03-31', 'category_1', 19],
                   ['2','2021-03-31', 'category_2', 2],
                   ['2','2021-03-31', 'category_3', 99],
                   ['3', '2021-02-28', 'category_1', 53],
                   ['3', '2021-02-28', 'category_2', 71],
                   ['3','2021-03-31', 'category_1', 19],
                   ['3','2021-03-31', 'category_2', 2],
                   ['3','2021-03-31', 'category_3', 99],
                   ['3','2021-03-31', 'category_4', 39]],
                   columns=['Account', 'Date', 'category', 'Amount'])


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
                        dcc.Input(id="account", type="string", placeholder="Enter Account"),
                        html.Div(id='figure_1')
])

@app.callback(Output('figure_1', 'children'),
             [Input('account', 'value')])
def update_figura_2(account):
    df_query = df[df['Account'] == account].copy()
    df_query = df_query.groupby(['Account', 'Date', 'category']).agg({'Amount': 'sum'}).reset_index().pivot(values='Amount', columns='Date')
    df_query.index =  df.loc[df['Account'] == account, 'category'].copy()
    df_query.fillna(0, inplace=True)
    return [DataTable(columns=[{"name": i, "id": i} for i in df_query.columns],
                      data=df_query.to_dict('records'),                     
                      style_as_list_view=True,
                      fill_width=True,
                      style_cell={'font-size': '12px'},
                      style_header={'display': 'none'},
                      style_table={'height': '395px', 'overflowY': 'auto'})]


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

其中的逻辑是在回调中创建 DataTable 图形并将其作为图形的子级返回，因此返回的图形将按帐户过滤您需要的列/值。