Highcharts热力图如何按固定值区间匹配颜色 替代渐变百分比色阶

目标规则 #

替换Highcharts Heatmap默认的连续渐变、百分比映射色阶逻辑，按照固定数值区间匹配对应颜色，色值规则如下：

• 数值为0：#ededed
• 数值1-9：#acd5f2
• 数值10-19：#7fa8c9
• 数值20-29：#527ba0
• 数值30及以上：#254e77
  同时左下角需显示对应区间的色值标识。

具体实现 #

不要使用默认的线性渐变stops配置，该配置基于0-1的百分比位置做颜色插值，仅适合连续色阶场景。直接使用Highcharts colorAxis内置的dataClasses分段配置即可实现离散固定色匹配，核心配置如下：

Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  // 其余常规配置（title、xAxis、yAxis、series数据等）按业务需求填写
  colorAxis: {
    // 声明使用分类分段色，关闭渐变插值
    dataClassColor: 'category',
    // 按区间定义分段规则
    dataClasses: [
      { from: 0, to: 0, color: '#ededed', name: '0' },
      { from: 1, to: 9, color: '#acd5f2', name: '1-9' },
      { from: 10, to: 19, color: '#7fa8c9', name: '10-19' },
      { from: 20, to: 29, color: '#527ba0', name: '20-29' },
      { from: 30, color: '#254e77', name: '30+' }
    ],
    // 配置左下角图例，对齐Gitlab样式
    legend: {
      align: 'left',
      verticalAlign: 'bottom',
      layout: 'horizontal',
      symbolHeight: 12,
      symbolWidth: 12,
      symbolRadius: 2
    }
  }
});

配置说明 #

• 每个dataClasses项可独立设置数值区间上下限、绑定固定色值、自定义图例显示文本
• 最后一个分段仅设置from: 30不设置to属性，会自动匹配所有大于等于30的数值，覆盖30+的场景
• 图例配置为水平排列、左下角定位，和Gitlab贡献热力图的色值标识位置、样式完全对齐
• 如果有更复杂的颜色判断逻辑，也可以在数据预处理阶段直接给每个数据点添加color属性指定固定色，但该方式需要手动自定义图例内容，优先使用dataClasses方案实现成本最低。

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