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

Question

我想在 Dash by Plotly 中并排绘制两个图表(而不是一个在另一个上方)。
教程没有并排绘制图形的示例。

我正在写 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而不是肩并肩

Answer 1

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

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每个图形的属性。这使得第二个图形不会被截断，而是会在较小的屏幕上堆叠。