Question

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

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'移动表和输入框，但是它们不起作用。他们创建了很多空白，这不是我想要的。我只想将表格移到页面的中间并将输入框放下。

我尝试使用读过的“列”来组织页面，这是一种很好的方法，但是那也不起作用。难道是Dally的可伸缩表不能很好地工作？

是否有解决此问题的另一种方法？

先谢谢了。

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)

**输出**

Answer 2

您可以在代码末尾添加一列计数。在我的应用上显示图形时，它对我有用。您还必须将三个插值放在同一个对象中，然后计为一个。将它们全部放在一个div中，将表放在另一个div中。

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

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

2 个答案: