Plotly热力图自定义刻度标签置于刻度间隙的实现问询

要实现标签显示在相邻刻度分隔点的中间，同时保持缩放时自动可见的多分类轴风格行为，可以通过计算区间中点作为标签位置，并利用Plotly的自定义刻度数组功能来实现：

修改后的代码 #

import numpy as np
import plotly.graph_objects as go
np.random.seed(13)

N = 100
M = 30
ticks = ['alpha', 'beta', 'gamma', 'zeta', 'theta', 'lambda']
ticks_locations = [0] + np.sort(np.random.randint(0, N, size=len(ticks)-1)).tolist()

# 计算每个标签对应的区间中点
mid_positions = []
for i in range(len(ticks)):
    if i < len(ticks) - 1:
        # 前5个标签对应相邻两个分隔点的中间位置
        mid = (ticks_locations[i] + ticks_locations[i+1]) / 2
    else:
        # 最后一个标签对应最后一个分隔点到N的中间位置
        mid = (ticks_locations[-1] + N) / 2
    mid_positions.append(mid)

image = np.random.randn(M, N)
fig = go.Figure(data=
    go.Heatmap(
        x=np.arange(N) + .5,
        z=image,
        colorscale='Bluered',
    )
)

fig.update_xaxes(
    tickmode='array',
    tickvals=mid_positions,
    ticktext=ticks,
    ticklabelposition='outside right',
    # 用网格线或垂直参考线标记区间分隔点
    gridcolor='black',
    gridwidth=2,
    ticklen=10,  # 可设为0隐藏中点刻度线
    tickcolor='gray',
    # 确保缩放时标签自动适配可见范围
    showticklabels=True,
    autorange=True,
)

# 添加垂直参考线明确区间分隔（可选）
for loc in ticks_locations:
    fig.add_vline(x=loc, line_width=2, line_color='black')

fig.write_html('/tmp/tmp.html')

关键实现细节 #

1. 区间中点计算：

   • 前len(ticks)-1个标签对应相邻两个自定义分隔点的平均值，确保标签落在区间正中间
   • 最后一个标签对应最后一个分隔点到热力图右边界（N）的中点，覆盖剩余列范围

2. 多分类轴风格的缩放行为：

   • 使用tickmode='array'指定自定义标签位置和文本，Plotly会自动在缩放时显示当前视图范围内的标签，完全匹配你需要的多分类轴外层标签行为

3. 区间分隔可视化：

   • 通过add_vline添加垂直参考线标记自定义分隔点，替代原刻度线位置，清晰划分每个标签对应的列范围
   • 也可通过调整网格线样式实现类似效果

4. 参数说明：

   • 原tickson='boundaries'仅适用于分类轴，连续轴下需通过计算中点实现标签居中
   • ticklabelposition='outside right'保持你原有的标签显示位置

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