Plotly imshow图表：修改网格颜色或添加单元格间距求助

问题原因 #

你用fig.update_xaxes设置的是坐标轴网格，而非热图单元格之间的分隔线，所以不会显示在单元格之间。Plotly的px.imshow本质是生成heatmap类型的trace，需要修改trace的属性来实现单元格分隔或间隔。

方案1：添加单元格边框（模拟网格） #

通过修改heatmap trace的marker.line属性，给每个单元格添加边框，实现类似网格的效果：

import pandas as pd
import plotly.express as px

# 示例数据
df = pd.DataFrame({'cat':['A','B','C'],
                   'att1':[1,0.55,0.15],
                   'att2':[0.55,0.3,0.55],
                   'att3':[0.55,0.55,0.17]
                  })
df = df.set_index('cat')

# 生成热图
fig = px.imshow(df, text_auto=False, height=800, width=900,
                color_continuous_scale=px.colors.diverging.Picnic, 
                aspect='auto')

# 设置x轴在顶部
fig.update_layout(xaxis={'side': 'top'})

# 给热图单元格添加边框（关键修改）
fig.update_traces(
    marker=dict(
        line=dict(width=2, color='white')  # 边框宽度和颜色，可根据需求调整
    )
)

# 隐藏颜色条、调整x轴刻度角度
fig.update(layout_coloraxis_showscale=False)
fig.update_xaxes(tickangle=-45, visible=True)

fig.show()

方案2：添加单元格空白间隔（优先推荐） #

利用heatmap的gap属性，直接在单元格之间添加空白间隔，区分度更明显：

import pandas as pd
import plotly.express as px

# 示例数据
df = pd.DataFrame({'cat':['A','B','C'],
                   'att1':[1,0.55,0.15],
                   'att2':[0.55,0.3,0.55],
                   'att3':[0.55,0.55,0.17]
                  })
df = df.set_index('cat')

# 生成热图
fig = px.imshow(df, text_auto=False, height=800, width=900,
                color_continuous_scale=px.colors.diverging.Picnic, 
                aspect='auto')

# 设置x轴在顶部
fig.update_layout(xaxis={'side': 'top'})

# 添加单元格间隔（关键修改）
fig.update_traces(
    gap=0.1,  # 间隔比例，范围0-1，值越大间隔越宽
    xgap=0.1,  # 单独设置x方向间隔（可选）
    ygap=0.1   # 单独设置y方向间隔（可选）
)

# 隐藏颜色条、调整x轴刻度角度
fig.update(layout_coloraxis_showscale=False)
fig.update_xaxes(tickangle=-45, visible=True)

fig.show()

补充说明 #

• 如果类别极多，可同时结合边框+间隔的方式，进一步提升可读性
• gap参数的取值可以根据数据量调整，数据越多可适当减小值，避免图表过宽/过高
• 边框颜色建议选择与热图配色对比强烈的颜色（如白色、黑色），确保分隔清晰

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