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

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)

脚本确实绘制了两个图形，但是，它们并不连续。我检查了大部分线程，但没有人真正给出完整的示例。我试图将 'style' 放入脚本中，但它不起作用。

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 应用程序中水平放置图形？

How to put graphs horizontally in Plotly Dash application?

python

plotly

plotly-dash