时间戳

首页 > 解决方案 > 如何在 Dash 中编写应用程序布局，使两个图表并排？

python - 如何在 Dash 中编写应用程序布局，使两个图表并排？

问题描述

我想通过 Plotly 在 Dash 中并排绘制两个图表（而不是一个在另一个之上）。这些教程没有并排绘制图表的示例。

我正在用app.layout以下方式写

app.layout = html.Div(className = 'row', children=

    [
        html.H1("Tips database analysis (First dashboard)"),
        dcc.Dropdown(id='d',
                     options = col_options,
                    value = 'Sun'),
        dcc.Graph(id="graph1"),
        dcc.Graph(id="graph2")
    ]

)

但在这graph1出现在上面graph2而不是并排之后

标签： pythonplotlyplotly-dash

解决方案

您可以通过将图形包装在 a 中并将 css 属性添加到每个图形来实现此div目的display: inline-block。

app.layout = html.Div(className='row', children=[
    html.H1("Tips database analysis (First dashboard)"),
    dcc.Dropdown(),
    html.Div(children=[
        dcc.Graph(id="graph1", style={'display': 'inline-block'}),
        dcc.Graph(id="graph2", style={'display': 'inline-block'})
    ])
])

结果并排图

编辑

我display: flex从包装 div 中删除了该属性，而是将该display: inline-block属性添加到每个图表中。这使得第二个图形不会被截断，而是会堆叠在较小的屏幕上。

推荐阅读