Question

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    html.Div(
        dcc.Graph(
            id='example-graph',
            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={'display': 'inline-block'}
        )),
    html.Div(
        dcc.Graph(
                id='example-graph2',
                figure={
                    'data': [
                        {'x': [5, 6, 3], 'y': [14, 21, 21], 'type': 'bar', 'name': 'SF'},
                        {'x': [3, 5, 7], 'y': [12, 43, 54], 'type': 'bar', 'name': u'Montréal'},
                    ],
                    'layout': {
                        'title': 'Dash Data Visualization222'
                    }
                },
                style={'display': 'inline-block'}
    ))], style={'width': '100%', 'display': 'inline-block'})



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

该脚本确实绘制了两个图形，但是它们不是连续的。我已经检查了大多数线程，但是没有人给出完整的例子。我试图在脚本中放入“样式”，但这不起作用。

Answer 1

如果将style={'display': 'inline-block'}应用于容器（即两个html.Div()）而不是图形（即两个dcc.Graph()），则会得到预期的结果。

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[

    html.H1(children='Hello Dash'),

    html.Div(children=[

        dcc.Graph(
            id='example-graph',
            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={'display': 'inline-block'}),

    html.Div(children=[

        dcc.Graph(
                id='example-graph2',
                figure={
                    'data': [
                        {'x': [5, 6, 3], 'y': [14, 21, 21], 'type': 'bar', 'name': 'SF'},
                        {'x': [3, 5, 7], 'y': [12, 43, 54], 'type': 'bar', 'name': u'Montréal'},
                    ],
                    'layout': {
                        'title': 'Dash Data Visualization222'
                    }}),

    ], style={'display': 'inline-block'}),

], style={'width': '100%', 'display': 'inline-block'})


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

如何在Plotly Dash应用程序中水平放置图形？

1 个答案: