代码之家  ›  专栏  ›  技术社区  ›  kms

从回调函数-Dash呈现数据表

  •  0
  • kms  · 技术社区  · 5 年前

    我正在创建一个包含多个选项卡、每个选项卡触发器和.py文件的仪表板,该仪表板呈现不同元素的plotly对象。

    例如,我的回调函数返回plots、charts,我希望返回Datatable。

    我可以用go.Table渲染pandas数据帧,如示例所示,但不能用DataTable,后者是较新的,并提供了增强的用户体验。

    import pandas as pd
    import dash
    from dash.dependencies import Input, Output, State
    import dash_html_components as html
    import dash_core_components as dcc
    import plotly.plotly as py
    from plotly import graph_objs as go
    from plotly.graph_objs import *
    import dash_table
    import flask
    from datetime import datetime as dt
    from app import app
    
    
    layout = html.Div([
    
        html.Div([
    
            dcc.Dropdown(
                    id='select',
                    options=[{'label': i, 'value': i} for i in List],
                    value='abc',
                    placeholder="xyz",
                    style={'width': '100%'}
    
            ), 
    
        ], style={"width": "15%", "margin-left": "20%", "margin-right": "35%"}), 
    
    
        html.Div([
    
            dash_table.DataTable(
    
                id='my-table',
                columns=[{"name": i, "id": i} for i in df_lease.columns],
    
            )
        ])
    ])
    
    
    @app.callback(Output('my-table', 'data'),
                  [
                      Input("landlord-select", "value")
                  ]
                 )
    def render_table(company, market):
    
        df_sub1 = df_lease[(df_lease['Landlord'] == company)] 
    
        df_sub1 = df_sub1[['UnitNo',
                           'Commencement_Date',
                           'Expiration_Date'
                           ]]
    
        return df_sub1.to_dict(orient='records')
    

    预期的行为是将pandas数据帧呈现为DataTable。

    - app.py
    - index.py
    - apps
       |-- __init__.py
       |-- app1.py
       |-- app2.py
    

    py包含呈现多页/选项卡布局的所有代码,以及 dcc.Tabs 更新为传递模板文件(app1.py)中的布局对象。我相信,这就是产生错误的原因。

    app.layout = html.Div([
    
        # tabs
        html.Div([
    
            dcc.Tabs(
                id="tabs",
                style={"height":"60","verticalAlign":"middle"},
                children=[
                     dcc.Tab(label="Marketing", value="marketing_tab"),
                     dcc.Tab(label="Tenants", value="tenants_tab"),
                     dcc.Tab(label="Portfolio", value="portfolio_tab"),
                ],
                value="marketing_tab",
            )
    
            ],
    
            className="row tabs_div"
            ),
    
            # Tab content
            html.Div(id="tab_content", style={"margin": "2% 3%"})
    
    ])
    
    @app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value")
              ]
             )
    def render_content(tab):
        """
        For user selections, return the relevant tab
        """
        if tab == "marketing_tab":
            return marketing.layout
        elif tab == "tenants_tab":
            return tenants.layout
        elif tab == "portfolio_tab":
            return portfolio.layout
        else:
            return marketing.layout
    
    
        # In[10]:
    
        if __name__ == '__main__':
            app.run_server(debug=True)
    
    0 回复  |  直到 5 年前
        1
  •  3
  •   coralvanda    5 年前

    This link 有一些很好的例子给你看看。基本上,你需要你的回调来更新 data 桌子的支柱。像这样的:

    @app.callback(
        Output('my-table', 'data'),
        [Input('dropdown', 'value')])
    def callback_a(i):
        df = pd.DataFrame(numpy.arange(30).reshape(5, 6))
    
        return df.to_dict(orient='records')
    

    id 对于每个列,都与数据帧中的列名匹配。如果要更改表中的数据,则可能需要另一个回调/输出来更新 columns