Dash Plotly：如何绘制支持用户动态调整行数的图像网格？

方案一：重新生成Subplots并固定尺寸 #

每次用户调整行数时，不要复用已有的subplots对象，直接重新调用make_subplots创建新的子图容器，同时通过控制figure的整体宽高，保证每个图像大小一致。

核心操作：

• 回调触发时，根据当前n_rows和n_cols重新生成子图
• 设置figure的height为 n_rows * 单图高度（比如250），width为 n_cols * 单图宽度（比如250）
• 添加go.Image后关闭子图坐标轴，避免额外空间占用
• 强制刷新布局，不依赖旧布局参数

示例代码：

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import numpy as np

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        html.Label("行数:"),
        dcc.Input(id='n_rows', type='number', value=2, min=1, max=10),
        html.Label("列数:"),
        dcc.Input(id='n_cols', type='number', value=5, min=5, max=10)
    ]),
    dcc.Graph(id='image-grid')
])

@app.callback(
    Output('image-grid', 'figure'),
    Input('n_rows', 'value'),
    Input('n_cols', 'value')
)
def update_grid(n_rows, n_cols):
    # 每次都重新创建子图，彻底重置布局
    fig = make_subplots(rows=n_rows, cols=n_cols)
    
    # 生成测试图像数据
    img_data = np.random.rand(100,100)
    
    # 逐个添加图像并关闭坐标轴
    for i in range(n_rows):
        for j in range(n_cols):
            fig.add_trace(go.Image(z=img_data), row=i+1, col=j+1)
            fig.update_xaxes(visible=False, row=i+1, col=j+1)
            fig.update_yaxes(visible=False, row=i+1, col=j+1)
    
    # 固定整体尺寸，确保单图大小一致
    fig.update_layout(
        height=n_rows * 250,
        width=n_cols * 250,
        margin=dict(l=10, r=10, t=10, b=10)
    )
    
    return fig

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

方案二：用Dash组件网格替代Plotly Subplots #

放弃Plotly的子图系统，改用Dash原生的网格组件（比如dash-bootstrap-components的Row/Col），每个图像放在独立的dcc.Graph中。这种方式完全由Dash组件系统控制布局，不会出现子图位置错乱的问题。

核心操作：

• 用dbc.Row和dbc.Col构建网格，每个Col对应一个图像
• 给每个dcc.Graph设置固定宽高，保证所有图像尺寸统一
• 根据n_rows和n_cols动态生成对应数量的Col组件，按行分组

示例代码（需先安装dash-bootstrap-components）：

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

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

app.layout = html.Div([
    html.Div([
        html.Label("行数:"),
        dcc.Input(id='n_rows', type='number', value=2, min=1, max=10),
        html.Label("列数:"),
        dcc.Input(id='n_cols', type='number', value=5, min=5, max=10)
    ], style={'margin': '10px'}),
    # 动态生成的网格容器
    html.Div(id='image-grid-container')
])

@app.callback(
    Output('image-grid-container', 'children'),
    Input('n_rows', 'value'),
    Input('n_cols', 'value')
)
def update_grid(n_rows, n_cols):
    img_data = np.random.rand(100,100)
    rows = []
    
    # 按行生成图像组
    for row_idx in range(n_rows):
        cols = []
        for col_idx in range(n_cols):
            # 每个图像对应独立的Graph
            fig = go.Figure(data=go.Image(z=img_data))
            fig.update_layout(
                height=200,
                width=200,
                margin=dict(l=0, r=0, t=0, b=0),
                xaxis_visible=False,
                yaxis_visible=False
            )
            cols.append(dbc.Col(dcc.Graph(figure=fig), width=12//n_cols))
        rows.append(dbc.Row(cols, className='mb-2'))
    
    return rows

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

问题根源解释 #

修改已有subplots对象的行数/列数时，Plotly不会彻底重置子图的布局参数，而go.Image的渲染依赖子图的精确尺寸计算，不像go.Scatter能自适应调整。重新创建subplots相当于彻底重置布局，可解决位置错乱；用Dash组件布局则完全绕开了Plotly子图的布局限制，更适合动态调整场景。

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