Как разместить графики горизонтально в приложении Plotly Da sh? - PullRequest
Новая
       11

Как разместить графики горизонтально в приложении Plotly Da sh?

0 голосов
/ 21 апреля 2020 
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)

Скрипт построил два графика, но, тем не менее, они не в ряд. Я проверил большинство тем, но никто не дает полный пример. Я попытался вставить «стиль» в скрипт, но он не работает.

1 Ответ

1 голос
/ 21 апреля 2020

Если вы примените 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)
...