如何在Plotly.js热力图中始终显示色阶的最小值与最大值？

要解决这个问题，你可以通过配置热力图的coloraxis参数，强制色阶包含数据的最小和最大值，同时自定义刻度显示：

方法1：手动指定包含最值的刻度数组 #

先计算数据的全局最小值和最大值，然后在配置里指定色阶的范围（cmin/cmax），并手动定义包含这两个值的刻度列表：

// 生成数据
const z = Array.from({length: 50}, () => Array.from({length: 50}, () => Math.floor(Math.random() * 500 + 47.2)));
// 计算全局最小/最大值
const flatZ = z.flat();
const minVal = Math.min(...flatZ);
const maxVal = Math.max(...flatZ);

Plotly.newPlot('plot', [{z: z, type: 'heatmap'}], {
  coloraxis: {
    // 强制色阶范围匹配数据最值
    cmin: minVal,
    cmax: maxVal,
    colorbar: {
      // 使用自定义刻度数组
      tickmode: 'array',
      // 包含最值，同时保留原有间隔刻度
      tickvals: [minVal, 100, 200, 300, 400, maxVal],
      ticktext: [minVal, 100, 200, 300, 400, maxVal]
    }
  }
});

方法2：自动生成包含最值的线性刻度 #

如果你希望自动生成均匀间隔的刻度且必须包含最值，可以结合tickmode: 'linear'和tick0、dtick，同时确保cmin/cmax严格匹配数据范围：

const z = Array.from({length: 50}, () => Array.from({length: 50}, () => Math.floor(Math.random() * 500 + 47.2)));
const flatZ = z.flat();
const minVal = Math.min(...flatZ);
const maxVal = Math.max(...flatZ);

Plotly.newPlot('plot', [{z: z, type: 'heatmap'}], {
  coloraxis: {
    cmin: minVal,
    cmax: maxVal,
    colorbar: {
      tickmode: 'linear',
      tick0: minVal,
      // 自定义刻度间隔，这里设为100，你可以根据需求调整
      dtick: 100,
      // 强制显示末尾的最大值
      showticklabels: true
    }
  }
});

关键配置说明 #

• cmin/cmax：强制色阶的颜色映射范围完全匹配数据的最小和最大值，避免Plotly自动缩放截断范围。
• colorbar.tickmode：设置为'array'可以手动指定要显示的刻度值；设置为'linear'则按线性间隔生成刻度。
• tickvals/ticktext：当使用array模式时，分别定义刻度的数值和显示文本（可以一致）。

HTML部分无需修改，保持原代码即可：

<script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
<div id="plot"></div>

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