如何缩小Plotly子图间距并保持3200px高度？

以下是几种有效缩小子图间距的方法，配合代码示例说明：

1. 调整子图垂直间距比例 #

在make_subplots中通过vertical_spacing参数设置子图间的垂直间距比例，默认值为0.05（即占总高度的5%）。当总高度为3200px时，默认间距会达到160px，将该值调小即可缩小实际间距：

fig = make_subplots(
    rows=4, cols=1,
    vertical_spacing=0.01  # 间距比例改为1%，实际间距32px
)

2. 自定义行高分配 #

因为你只添加了3个Scatter trace，4行子图中有1行为空。通过row_heights参数给有内容的行分配更多高度，空行分配极小比例，避免空行占用过多空间：

fig = make_subplots(
    rows=4, cols=1,
    vertical_spacing=0.01,
    row_heights=[0.27, 0.27, 0.27, 0.19]  # 前3行各占27%，最后1行占19%
)

3. 统一figure与CSS高度，避免冲突 #

将figure的高度明确设置为3200px，和CSS中#bar-graph的高度保持一致，防止responsive=True模式下Plotly自动拉伸布局导致间距异常：

fig.update_layout(
    margin=dict(l=0, r=0, t=0, b=0),
    height=3200  # 与CSS高度匹配
)

完整代码示例 #

from plotly.subplots import make_subplots
import plotly.graph_objects as go

# 创建带自定义间距和行高的子图
fig = make_subplots(
    rows=4, cols=1,
    vertical_spacing=0.01,
    row_heights=[0.27, 0.27, 0.27, 0.19]
)

# 添加Scatter trace到对应行
fig.add_trace(go.Scatter(x=[1,2,3], y=[4,5,6]), row=1, col=1)
fig.add_trace(go.Scatter(x=[1,2,3], y=[7,8,9]), row=2, col=1)
fig.add_trace(go.Scatter(x=[1,2,3], y=[10,11,12]), row=3, col=1)

# 配置布局参数
fig.update_layout(
    margin=dict(l=0, r=0, t=0, b=0),
    height=3200
)

# Dash组件配置
dcc.Graph(id='bar-graph', figure=fig, responsive=True)

对应的CSS样式：

#bar-graph {
    height: 3200px !important;
}

这样设置后，既能保持3200px的总高度，又能有效缩小子图间的间距，解决高度过大时的布局异常问题。

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