如何为Plotly.js热图配置多套colorscale以适配不同阈值区间着色需求

Plotly.js 原生不支持单热图实例配置多套独立 colorscale，以下是两种可落地的实现方案：

方案1：数值分段预映射+统一自定义色阶（推荐） #

兼容性最好，无额外图层开销，适配绝大多数场景：

• 操作逻辑：
  1. 先对热图原始数值做分段偏移映射，让不同阈值区间的数值落到互不重叠的连续数值段，比如低阈值区间（-115 ~ -105）保留原始值，高阈值区间统一加200（偏移量需大于所有区间的数值跨度，避免区间重叠）
  2. 构建一套覆盖映射后全数值范围的自定义colorscale，分段对应不同阈值区间的配色规则
  3. 悬浮提示通过customdata存储原始数值，避免展示映射后的偏移值
• 代码示例：

// 数值映射函数
const mapHeatmapValue = (originVal) => {
  // 低阈值区间保留原值
  if (originVal <= -105) return originVal
  // 高阈值区间偏移200，和低区间完全隔离
  return originVal + 200
}

// 全区间统一自定义色阶
const multiThresholdColorscale = [
  [0, '#00f'],     // 低区间最小值对应蓝色
  [0.49, '#ff0'],   // 低区间最大值（-105）对应黄色
  [0.5, '#ff0'],    // 高区间起始和低区间结尾颜色对齐
  [1, '#f00']       // 高区间最大值对应红色
]

// 热图trace配置
const heatmapTrace = {
  type: 'heatmap',
  z: processedZData, // 经过mapHeatmapValue处理后的数值数组
  customdata: originZData, // 存储原始数值用于悬浮提示
  colorscale: multiThresholdColorscale,
  hovertemplate: '数值: %{customdata}<extra></extra>',
  showscale: true
}

• 优势：仅需单个热图trace，所有原生交互（缩放、框选、悬浮）都无异常，动态调整阈值时只需要重新计算映射值和色阶即可，性能损耗极低。

方案2：多层热图叠加分区渲染 #

适合阈值区间完全独立、需要单独控制各区域显隐的场景：

• 操作逻辑：
  1. 拆分多套热图trace，每套trace仅渲染对应阈值区间的数据，非当前区间的位置填null跳过渲染
  2. 每套trace单独配置对应区间的colorscale、zmin、zmax，所有trace的x、y轴配置完全一致
  3. 隐藏所有trace的默认colorbar，额外配置一个公共自定义colorbar统一展示全区间配色规则
• 优势：每套区间的色阶完全独立，不需要修改原始数值，可单独控制某一区间的显隐、透明度。
• 注意事项：上层trace的数值不要和下层重叠，避免出现颜色遮挡异常。

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