使用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，然后在父div元素上将width设置为50%，如下所示：

# -*- 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)

产生此布局：