Plotly imshow反转y轴标签致图像反转的原因及解决方法

原因分析 #

Seaborn和Plotly对矩阵数据的默认渲染逻辑存在核心差异：

• Seaborn的heatmap默认将矩阵的[0,0]位置对应到图像的左上角，你手动替换x、y轴标签时，数据的渲染顺序完全匹配标签排布，因此能得到符合预期的效果。
• Plotly的imshow（无论是express还是graph_objects版本）默认将矩阵的[0,0]位置对应到图像的左下角。如果仅修改y轴标签为[9,8…-10]，只是替换了标签文字，但数据的渲染位置仍遵循左下角起始的逻辑，导致标签与数据的对应关系完全错位，最终图像出现垂直反转。

解决办法 #

两种可靠修复方式，任选其一即可：

方式一：反转矩阵数据适配Plotly默认逻辑 #

既然Plotly默认从左下角开始渲染，我们可以将原始矩阵垂直翻转，再设置对应标签，让数据位置与标签匹配：

import numpy as np
import plotly.express as px

# 生成20×20测试矩阵
data = np.random.rand(20, 20)
# 垂直翻转矩阵
flipped_data = np.flipud(data)
# 定义轴标签
x_labels = list(range(-10, 10))
y_labels = list(range(9, -11, -1))

fig = px.imshow(flipped_data, x=x_labels, y=y_labels, aspect="equal")
fig.show()

方式二：修改Plotly的y轴渲染逻辑 #

直接调整Plotly的y轴范围为反转状态，让它和Seaborn一样从左上角开始渲染矩阵[0,0]，无需改动原始数据：

import numpy as np
import plotly.express as px

data = np.random.rand(20, 20)
x_labels = list(range(-10, 10))
y_labels = list(range(9, -11, -1))

fig = px.imshow(data, x=x_labels, y=y_labels, aspect="equal")
# 反转y轴范围，使矩阵[0,0]对应图像左上角
fig.update_yaxes(autorange='reversed')
fig.show()

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