如何在 Python + Dash + Plotly 中将 table 移动到网页中间？

Question

我想将 table 移动到网页屏幕的中间。我有以下代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'c78bf172206ce24f77d6363a2d754b59/raw/'
    'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
    'usa-agricultural-exports-2011.csv')

def generate_table(dataframe, max_rows=10):
    return (

        # Header
        html.Table([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))]
    ))


app = dash.Dash()

app.layout = html.Div(children=[
    html.Div([dcc.Input(id='my-id1', value='initial value', type='text')]),
    html.Div([dcc.Input(id='my-id2', value='initial value', type='text')]),
    html.Div([dcc.Input(id='my-id3', value='initial value', type='text')]),
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

这使得网页看起来像这样：

但我希望它看起来像这样：

我试过使用 'margin-top' 和 'margin-left' 来移动 table 和输入框，但它们无法按我希望的方式工作。他们创造了很多白色 space 这不是我想要做的。我只想将 table 移到页面中间，然后将输入框放下。

我尝试使用 'columns'，我认为这是组织页面的好方法，但也没有用。难道 plotly table 不能很好地与 Dash 配合使用？

这个问题还有别的解决办法吗？

提前致谢。

Answer 1

您需要处理模板布局部分。基本上我做了三个主要的改变，

将输出分成行
将行分成两部分
为左侧部分添加了边距以确保输入框位于屏幕之间

这是代码。我还附上了您想要的输出屏幕截图。

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'c78bf172206ce24f77d6363a2d754b59/raw/'
    'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
    'usa-agricultural-exports-2011.csv')

def generate_table(dataframe, max_rows=10):
    return (

        # Header
        html.Table([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))]
    ))


app = dash.Dash()

app.layout = html.Div(children=[
    html.Div(children=[

    html.Div([dcc.Input(id='my-id1', value='initial value', type='text')]),
    html.Div([dcc.Input(id='my-id2', value='initial value', type='text')]),
    html.Div([dcc.Input(id='my-id3', value='initial value', type='text')])],

    className='two columns', style={'margin-top': '42vh'}),



    html.Div(children=[html.H4(children='US Agriculture Exports (2011)'),
                       generate_table(df)], className='ten columns')
], className='row' )

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

** 输出**

如何在 Python + Dash + Plotly 中将 table 移动到网页中间？

How do I move table to the middle of the webpage in Python + Dash + Plotly?

python

plotly-dash