Plotly：调整轴范围后如何填充Histogram2dContour的空白背景？

方法1：通过等高线参数延伸填充到轴边界 #

利用contours参数的start、end和coloring="fill"，强制最外层等高线覆盖整个设定的轴范围，让色阶的最浅色自动填充空白区域。

修改后的代码示例：

import numpy as np
np_random = np.random.default_rng()
import plotly.graph_objects as go
from plotly.subplots import make_subplots

fixed_range = 100
scatter_set_1 = np_random.normal(scale=85, size=(164, 2))
scatter_set_2 = np_random.normal(scale=26, size=(78, 2))

fig = make_subplots(1, 2, shared_yaxes=True, subplot_titles=['scatter set 1', 'scatter set 2'])

fig.update_yaxes(range=[-fixed_range, fixed_range])
fig.update_xaxes(range=[-fixed_range, fixed_range])

# 处理第一组数据
fig.add_trace(go.Histogram2dContour(
    x=scatter_set_1[:,0],
    y=scatter_set_1[:,1],
    colorscale='Reds',
    showscale=False,
    # 强制等高线覆盖整个轴范围
    contours=dict(
        start=-fixed_range,
        end=fixed_range,
        coloring="fill"
    )
), 1, 1)

# 处理第二组数据
fig.add_trace(go.Histogram2dContour(
    x=scatter_set_2[:,0],
    y=scatter_set_2[:,1],
    colorscale='Greens',
    showscale=False,
    contours=dict(
        start=-fixed_range,
        end=fixed_range,
        coloring="fill"
    )
), 1, 2)

fig.show()

方法2：添加底层背景矩形覆盖空白 #

在每个子图最底层添加与色阶最浅色匹配的矩形，覆盖整个轴范围，再将等高线图层放在上方，适合需要自定义背景色的场景。

修改后的代码示例：

import numpy as np
np_random = np.random.default_rng()
import plotly.graph_objects as go
from plotly.subplots import make_subplots

fixed_range = 100
scatter_set_1 = np_random.normal(scale=85, size=(164, 2))
scatter_set_2 = np_random.normal(scale=26, size=(78, 2))

fig = make_subplots(1, 2, shared_yaxes=True, subplot_titles=['scatter set 1', 'scatter set 2'])

fig.update_yaxes(range=[-fixed_range, fixed_range])
fig.update_xaxes(range=[-fixed_range, fixed_range])

# 第一个子图添加红色系背景（对应Reds色阶最浅色）
fig.add_trace(go.Scatter(
    x=[-fixed_range, fixed_range, fixed_range, -fixed_range, -fixed_range],
    y=[-fixed_range, -fixed_range, fixed_range, fixed_range, -fixed_range],
    fill="toself",
    fillcolor="#fff5f0",
    line=dict(width=0),
    showlegend=False
), 1, 1)

# 第二个子图添加绿色系背景（对应Greens色阶最浅色）
fig.add_trace(go.Scatter(
    x=[-fixed_range, fixed_range, fixed_range, -fixed_range, -fixed_range],
    y=[-fixed_range, -fixed_range, fixed_range, fixed_range, -fixed_range],
    fill="toself",
    fillcolor="#f7fcf5",
    line=dict(width=0),
    showlegend=False
), 1, 2)

# 添加等高线图（置于背景层上方）
fig.add_trace(go.Histogram2dContour(x=scatter_set_1[:,0],
                                    y=scatter_set_1[:,1],
                                    colorscale='Reds',
                                    showscale=False), 1, 1)
fig.add_trace(go.Histogram2dContour(x=scatter_set_2[:,0],
                                    y=scatter_set_2[:,1],
                                    colorscale='Greens',
                                    showscale=False), 1, 2)

fig.show()

方法3：改用Heatmap+Contour组合 #

先计算二维直方图的密度矩阵，用go.Heatmap填充整个轴范围的背景，再叠加go.Contour绘制等高线，天然消除空白区域。

代码示例：

import numpy as np
np_random = np.random.default_rng()
import plotly.graph_objects as go
from plotly.subplots import make_subplots

fixed_range = 100
scatter_set_1 = np_random.normal(scale=85, size=(164, 2))
scatter_set_2 = np_random.normal(scale=26, size=(78, 2))

# 计算二维直方图的工具函数
def get_2d_histogram(data, range_min, range_max, bins=50):
    hist, x_edges, y_edges = np.histogram2d(data[:,0], data[:,1], bins=bins, range=[[range_min, range_max], [range_min, range_max]])
    x_center = (x_edges[:-1] + x_edges[1:])/2
    y_center = (y_edges[:-1] + y_edges[1:])/2
    return hist.T, x_center, y_center

fig = make_subplots(1, 2, shared_yaxes=True, subplot_titles=['scatter set 1', 'scatter set 2'])

fig.update_yaxes(range=[-fixed_range, fixed_range])
fig.update_xaxes(range=[-fixed_range, fixed_range])

# 处理第一组数据
hist1, x1, y1 = get_2d_histogram(scatter_set_1, -fixed_range, fixed_range)
fig.add_trace(go.Heatmap(z=hist1, x=x1, y=y1, colorscale='Reds', showscale=False), 1,1)
fig.add_trace(go.Contour(z=hist1, x=x1, y=y1, colorscale='Reds', showscale=False, line_width=1), 1,1)

# 处理第二组数据
hist2, x2, y2 = get_2d_histogram(scatter_set_2, -fixed_range, fixed_range)
fig.add_trace(go.Heatmap(z=hist2, x=x2, y=y2, colorscale='Greens', showscale=False), 1,2)
fig.add_trace(go.Contour(z=hist2, x=x2, y=y2, colorscale='Greens', showscale=False, line_width=1), 1,2)

fig.show()

内容的提问来源于stack exchange，提问作者osc-ml