在Dash Plotly中并排放置两个不同的图表

Question

你想知道怎么让两个不同的图表并排显示在Dash Plotly中吗？

我想调整布局，让图表2和图表3能够并排放在一起。

######################### 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组件，你可以使用一个叫做dash_bootstrap_components的包。你可以查看这个链接了解更多信息：https://dash-bootstrap-components.opensource.faculty.ai/docs/。这个包里有两个很有用的函数，分别是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

如果想了解更多，你还可以选择每一列的宽度。