如何解决Plotly中make_subplots生成的子图重叠问题

以下是几个排查和解决子图重叠的关键点：

• 正确初始化子图布局
  创建make_subplots时，除了指定rows=2, cols=1，还可以通过vertical_spacing参数设置上下子图的间距，避免挤压。示例：

  from plotly.subplots import make_subplots
  fig = make_subplots(rows=2, cols=1, vertical_spacing=0.15)  # 间距值可根据需求调整
  

• 添加trace时明确指定位置
  调用add_trace必须传入row和col参数，确保每个图表被放到正确的子图位置。注意：如果是提前单独创建的figure，要提取它的data部分，而不是直接添加整个figure。示例：

  # 把热力图放到第1行第1列
  fig.add_trace(heatmap_fig.data[0], row=1, col=1)
  # 把折线图放到第2行第1列
  fig.add_trace(line_fig.data[0], row=2, col=1)
  

• 避免重复使用同一个figure实例
  如果在函数或循环中生成图表，每次都要重新调用make_subplots创建新的fig对象，否则旧的trace会叠加到新图里。

• 调整整体布局高度
  如果figure总高度太小，两个子图会被迫挤压重叠，通过update_layout设置合适的高度：

  fig.update_layout(height=800)  # 高度可根据图表内容调整
  

完整示例代码 #

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

# 模拟你的数据预处理函数
def prepare_plot_data():
    return pd.DataFrame({
        "x": ["A", "B", "C"],
        "y": ["X", "Y", "Z"],
        "z": [[1,2,3],[4,5,6],[7,8,9]]
    })

def prepare_data_trend():
    return pd.DataFrame({
        "date": pd.date_range("2024-01-01", periods=10),
        "value": [10,15,12,18,20,17,22,25,23,28]
    })

# 创建2行1列的子图，设置垂直间距
fig = make_subplots(rows=2, cols=1, vertical_spacing=0.15)

# 生成热力图trace
heatmap_data = prepare_plot_data()
heatmap = go.Heatmap(x=heatmap_data["x"], y=heatmap_data["y"], z=heatmap_data["z"])

# 生成折线图trace
trend_data = prepare_data_trend()
line = go.Scatter(x=trend_data["date"], y=trend_data["value"], mode="lines+markers")

# 添加到对应子图位置
fig.add_trace(heatmap, row=1, col=1)
fig.add_trace(line, row=2, col=1)

# 设置整体布局高度
fig.update_layout(height=800, title_text="子图展示示例")

# Dash应用中直接把fig传给dcc.Graph即可
# from dash import Dash, html, dcc
# app = Dash(__name__)
# app.layout = html.Div([dcc.Graph(figure=fig)])
# if __name__ == "__main__":
#     app.run_server(debug=True)

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