python - 使用 Dash (Python) 移动对象(条形图)

Question

我想把一辆小车移到页面中间。我使用以下代码创建了条形图:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        style={
            'height': 500,
            'width': 900,
            'display': 'inline-block'},
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }

        }

    )
])

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

我想把这个图表移到页面中间。有没有一种方法可以指定关于条形图应该去哪里的特定坐标？

Answer 1

如果你只想让图表居中，你必须将 margin-left 和 margin-right 设置为 auto 并且你需要指定 display 到图形样式字典中的 block。

像这样:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        style={
            'height': 500,
            'width': 900,
            "display": "block",
            "margin-left": "auto",
            "margin-right": "auto",
            },
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }

        }

    )
])

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

导致此布局:

如果你希望一切都居中，你可以将 margin 指定为 auto 并将 width 设置为 50%像这样的父 div 元素:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        style={
            'height': 500,
            'width': 900,
            },
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }

        }

    )
],style = {'margin':'auto','width': "50%"})

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

导致此布局: