Dash布局疑问：2x2网格并排图表与下拉框回调设置

你的实现思路是正确的，但布局部分可以更规范，下面详细说明：

为什么必须显式设置宽度？ #

用inline-block实现横向排列时，元素默认宽度由内部内容决定。前两个图表所在的div没有额外元素，宽度刚好适配图表，但第三个、第四个div（尤其是第四个包含下拉框+图表）的内容宽度不确定，如果不指定宽度，浏览器会自动计算，导致布局错乱或者换行。所以显式设置宽度是inline-block布局下的常规操作，你的做法是可行的。

布局优化建议 #

手动设置百分比宽度容易出现间距、换行问题，推荐用更现代的布局方式：

方法1：使用CSS Grid

直接在外层div设置Grid布局，轻松实现2x2网格：

from dash import Dash, dcc, html, Input, Output
import plotly.graph_objects as go

app = Dash(__name__)

f1 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f2 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f3 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f4 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))

app.layout = html.Div([
    html.Div(dcc.Graph(id="1", figure=f1)),
    html.Div(dcc.Graph(id="2", figure=f2)),
    html.Div(dcc.Graph(id="3", figure=f3)),
    html.Div([
        dcc.Dropdown(
            id="dropdown",
            options=["Gold", "MediumTurquoise", "LightGreen"],
            value="Gold",
            clearable=False), 
        dcc.Graph(id="4", figure=f4)
    ])
], style={
    'display': 'grid',
    'grid-template-columns': '1fr 1fr',  # 两列等宽
    'gap': '15px',  # 网格间距
    'padding': '15px'
})

@app.callback(
    Output("4", "figure"),
    Input("dropdown", "value"),
)
def display_color(color):
    fig = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color=color))
    return fig

if __name__ == "__main__":
    app.run_server(debug=True)

方法2：使用Dash Bootstrap Components（推荐）

借助bootstrap的栅格系统，布局更灵活且响应式：
首先安装依赖：pip install dash-bootstrap-components

from dash import Dash, dcc, html, Input, Output
import plotly.graph_objects as go
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

f1 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f2 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f3 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
f4 = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(dcc.Graph(id="1", figure=f1), width=6),
        dbc.Col(dcc.Graph(id="2", figure=f2), width=6),
    ]),
    dbc.Row([
        dbc.Col(dcc.Graph(id="3", figure=f3), width=6),
        dbc.Col([
            dcc.Dropdown(
                id="dropdown",
                options=["Gold", "MediumTurquoise", "LightGreen"],
                value="Gold",
                clearable=False), 
            dcc.Graph(id="4", figure=f4)
        ], width=6),
    ])
], fluid=True)

@app.callback(
    Output("4", "figure"),
    Input("dropdown", "value"),
)
def display_color(color):
    fig = go.Figure(go.Bar(x=["a", "b", "c"], y=[2, 3, 1], marker_color="Gold"))
    return fig

if __name__ == "__main__":
    app.run_server(debug=True)

回调部分的优化 #

你当前的回调每次新建Figure是可行的，也可以改为更新现有图表的属性，减少资源消耗：

def display_color(color):
    fig = f4.copy()
    fig.update_traces(marker_color=color)
    return fig

总结：你的原始实现是正确的，但布局可以用Grid或Bootstrap栅格优化，让代码更简洁、布局更稳定。

内容的提问来源于stack exchange，提问作者TylerD