使用 DASH 在一页上显示两个数据框
Use DASH to display two dataframes on one page
我想创建第二个数据框,然后在页面上显示两个 table。现在这只显示一个。看起来 dash_bootstrap_components 可以让我分割屏幕,但我找不到包含多个 table
的示例
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)
尝试分离出生成每个 table 的代码块。然后 assemble 它们都在 dcc 容器中,然后可以在您的布局中使用。这使得以后调试也很容易 :)。下面是一些示例代码,可以让您了解我的意思。
首先要生成的部分 table 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
下一个 assemble 如果需要,此作为 dbc.Row()
。
最后,将它们放在一起 dbc.Container
例如:
page_content = dbc.Container([
table1_section,
table2_section,
somegraph_section
], fluid=True)
希望这对您有所帮助。
我想创建第二个数据框,然后在页面上显示两个 table。现在这只显示一个。看起来 dash_bootstrap_components 可以让我分割屏幕,但我找不到包含多个 table
的示例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)
尝试分离出生成每个 table 的代码块。然后 assemble 它们都在 dcc 容器中,然后可以在您的布局中使用。这使得以后调试也很容易 :)。下面是一些示例代码,可以让您了解我的意思。
首先要生成的部分 table 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
下一个 assemble 如果需要,此作为 dbc.Row()
。
最后,将它们放在一起 dbc.Container
例如:
page_content = dbc.Container([
table1_section,
table2_section,
somegraph_section
], fluid=True)
希望这对您有所帮助。