使用 Dash Plotly 并排放置 2 个不同的图表

Question

如何使用 Dash Plotly 允许 2 个不同的图表并排放置？

我想更改布局以允许 graph2 和 graph3 并排。

######################### Laying out Charts & Widgets to Create App Layout ##########
header = html.H2(children="Fast Food in U.S.")

row1 = html.Div(children=[graph1], className="eight columns")  # No dropdown for graph1

graphs_div = html.Div(children=[
    html.Div(children=[multi_select_graph2, graph2], className="six columns"),
    html.Div(children=[dropdown_graph3, graph3], className="six columns")
], className="row")  # Wrap both graphs in a single row

layout = html.Div(children=[header, row1, graphs_div], style={"text-align": "center", "justifyContent": "center"})

app.layout = layout

Answer 1

要放置仪表板组件，您可以使用 dash_bootstrap_components 包。请参阅 https://dash-bootstrap-components.opensource.faculty.ai/docs/ 这个包有 2 个有用的函数 dbc.col() 和 dbc.row()。

header = html.H2(children="Fast Food in U.S.")
row1 = html.Div(children=[graph1], className="eight columns")  # No dropdown for graph1

graphs_div = html.Div(children=[

    dbc.Row([
             dbc.col([
                  html.Div(children=[multi_select_graph2, graph2], className="six columns")
             ]),
             dbc.col([
                  html.Div(children=[dropdown_graph3, graph3], className="six columns")
], className="row")  # Wrap both graphs in a single row
             ]),
    ])
layout = html.Div(children=[header, row1, graphs_div], style={"text-align": "center", "justifyContent": "center"})

app.layout = layout

要了解更多信息，您还可以选择每列的宽度。