Plotly绘制对角线上下分属不同矩阵的热力图及图例重叠问题

问题场景 #

需要将两个维度相同但数值范围不同的矩阵分别绘制在热力图的对角线上下区域，现有代码已实现区域展示，但存在图例重叠的问题。

解决方法：调整图例位置+独立颜色轴 #

原代码的核心问题是两个热力图默认共享同一颜色轴，导致图例重叠。可以通过为两个热力图分配独立的颜色轴，并分别设置每个图例的位置来解决：

import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

# 创建数据
matrix1 = pd.DataFrame([
    [np.nan,np.nan,np.nan],
    [0.2,np.nan,np.nan],
    [0.5,0.7,np.nan]
])
matrix2 = pd.DataFrame([
    [np.nan,20,40],
    [np.nan,np.nan,70],
    [np.nan,np.nan,np.nan]
])            

# 绘制第一个热力图（对角线下方），指定颜色轴和图例标签
fig = px.imshow(
    matrix1,
    color_continuous_scale='Viridis',
    labels=dict(color='矩阵1数值'),
    title='对角线上下双热力图'
)
# 设置第一个图例的位置（左侧）
fig.update_layout(
    coloraxis_colorbar=dict(
        yanchor="top",
        y=1,
        xanchor="left",
        x=0.01,
        title_side="top"
    )
)

# 添加第二个热力图（对角线上方），使用独立颜色轴
fig.add_trace(go.Heatmap(
    z=matrix2,
    colorscale='Bluered',
    name='矩阵2数值',
    coloraxis="coloraxis2"  # 指定第二个颜色轴
))
# 设置第二个图例的位置（右侧）
fig.update_layout(
    coloraxis2=dict(
        colorbar=dict(
            yanchor="top",
            y=1,
            xanchor="right",
            x=0.99,
            title_side="top"
        )
    )
)

fig.show()

关键说明： #

• 为第二个热力图指定coloraxis="coloraxis2"，使其使用独立的颜色轴，避免与第一个热力图的颜色刻度冲突
• 通过coloraxis_colorbar和coloraxis2.colorbar分别设置两个图例的位置，x和xanchor参数控制左右位置，y和yanchor控制上下位置
• 为每个图例添加明确的标签，方便区分两组数据

实现方式的优化建议 #

如果尝试将两个矩阵合并为一个后绘制单一热力图，会因为两组数据数值范围差异过大（0.2~0.7 vs 20~70），导致其中一组数据的颜色区分度极低，因此保留两个独立热力图+分置图例的方式是更合理的选择。

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