【问题标题】:Use DASH to display two dataframes on one page使用 DASH 在一页上显示两个数据框
【发布时间】:2020-02-13 19:35:32
【问题描述】:

我想创建第二个数据框,然后在一个页面上显示两个表格。现在只显示一个。看起来 dash_bootstrap_components 可以让我分割屏幕,但我找不到包含多个表的示例

import dash
import dash_html_components as html
import pandas as pd

#would like to add a second dataframe here
df1 = pd.read_sas('C:\PY_DASH\file1.sas7bdat', format = 'sas7bdat', encoding='utf-8' )

def generate_table(dataframe, max_rows=7):
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

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

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

#I would like to add the second table here
app.layout = html.Div(children=[
    html.H1(children='QA Test: Test 0-1: Output Files Record Count Comparison'),
    generate_table(df1)
])

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

【问题讨论】:

    标签: python plotly-dash


    【解决方案1】:

    尝试分离出生成每个表的代码块。然后将它们都组装在一个 dcc 容器中,然后可以在您的布局中使用。这使得以后也很容易调试:)。下面是一些示例代码,让您了解我的意思。

    首先生成表1的部分。在此您可以使用您的函数generate_table

    one_row = html.Tr([html.Td(<content>, id="row1" )])
    t_head = [
          html.Thead(html.Tr([html.Th("Table1")]))
    ]
    table1_section = dbc.Card(children=[
        dbc.CardHeader(html.H5("Table1 header", id="t_head")),
        dbc.CardBody([
          dbc.Table(t_head + [html.Tbody([one_row])])
        ])
    ])
    

    同理table2_section 如果需要,接下来将其组装为dbc.Row()

    最后,将它们放在一个dbc.Container 中,例如:

    page_content = dbc.Container([
          table1_section,
          table2_section,
          somegraph_section
    ], fluid=True)
    

    希望这会有所帮助。

    【讨论】:

    • 我会试试的。我终于参加了 udemy python 课程和无情节仪表板课程。我现在对它的工作原理有了更清晰的了解。
    • *情节并非无情节
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-14
    相关资源
    最近更新 更多