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

【问题标题】：How to put graphs horizontally in Plotly Dash application?如何在 Plotly Dash 应用程序中水平放置图表？
【发布时间】：2020-08-04 12:35:22
【问题描述】：

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)

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

【问题讨论】：

标签： python plotly plotly-dash

【解决方案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)

【讨论】：

您好，当我将笔记本电脑从 Mac 更改为 Windows 时，它无法工作....您知道发生了什么吗？
检查您是否在另一台笔记本电脑上安装了相同的软件包版本，尤其是dash-renderer。