使用破折号移动对象（条形图）（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)

导致此布局：

使用破折号移动对象（条形图）（Python）

Moving objects (bar chart) using Dash (Python)

python

plotly-dash