如何独立于数据值设置Plotly热图的颜色刻度范围？

要强制Plotly热图的颜色刻度固定在0-10（红色到绿色），不受数据自身最值影响，核心是设置以下参数：

• cmin: 颜色刻度的强制最小值，设为0
• cmax: 颜色刻度的强制最大值，设为10
• colorscale: 定义颜色与刻度的映射关系，直接指定0对应红色、1对应绿色

完整代码示例 #

// 示例数据（可替换为你的二维热图数据）
const z = [
  [2, 5, 6],
  [2, 6, 8],
  [2, 0, 0]
];

// 渲染热图到指定容器（需提前在页面中创建id为heatmap-container的元素）
Plotly.newPlot('heatmap-container', [{
  type: 'heatmap',
  z: z,
  cmin: 0,
  cmax: 10,
  // 红色对应刻度最小值0，绿色对应刻度最大值10，中间值自动过渡
  colorscale: [[0, 'red'], [1, 'green']],
  // 自定义颜色条，明确显示0-10的刻度范围
  colorbar: {
    title: '数值',
    tickvals: [0, 5, 10],
    ticktext: ['0', '5', '10']
  }
}]);

效果说明 #

设置后：

• 刻度0对应纯红色，刻度10对应纯绿色，中间数值按比例映射颜色
• 示例数据中的2会显示偏红的色调，8显示偏绿的色调
• 完全不受数据自身最值（如你提到的4.2、5.2）干扰，颜色映射严格遵循预设的0-10范围

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