Highcharts热力图配置colorAxis实现正数绿色负数红色的方法

问题描述 #

我在同一个容器内渲染了多个热力图，需要配置颜色轴（colorAxis）使正数落在绿色区间、负数落在红色区间。我尝试将colorAxis: minColor设置为#009933、colorAxis: maxColor设置为#ff3300，但未能实现所有负数对应红色区间、所有正数对应绿色区间的效果，请问在Highcharts中是否可以实现该需求？

以下是我的代码：

JS代码 #

function getPointCategoryName(point, dimension) {
        var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
        return axis.categories[point[isY ? 'y' : 'x']];
    }

   Highcharts.chart('container', {

     chart: {
      type: 'heatmap',     },

      xAxis: {
        categories: ['val1', 'val2', 'val3',]
     },

     yAxis: [{
      title: { text: 'iPhone'},
      height: '50%', 
      lineWidth: 2, 
      categories: ['google', 'bing', 'bing',]
   }, {
      title: { text: 'iPad'},
      height: '50%', 
      top: '50%', 
      offset: 0,
      lineWidth: 2, 
      categories: ['google', 'bing', 'bing',]
   }],

   accessibility: {
     point: {
      descriptionFormatter: function (point) {
       var ix = point.index + 1,
       xName = getPointCategoryName(point, 'x'),
       yName = getPointCategoryName(point, 'y'),
       val = point.value;
       return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
    }
 }
},

colorAxis: {
   // min: -50,
   minColor: '#ff3300', 
   maxColor: '#009933'
},

tooltip: {
  formatter: function () {
   return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
   this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},

plotOptions: {
   series: {
      dataLabels: {
         formatter: function() {
            return `${this.point.value}%`
         }
      }
   }
},

series: [{
  borderWidth: 1,
  data:[
  [0, 0, -10],
  [0, 1, 10],
  [0, 2, -5],
  [1, 0, 21],
  [1, 1, -10],
  [1, 2, 5],
  [2, 0, -13],
  [2, 1, 53],
  [2, 2, 15],
  ],
  dataLabels: {
     enabled: true,
     color: '#000000'
  }
}, {
  borderWidth: 1,
  data:[
  [0, 0, 15],
  [0, 1, 11],
  [0, 2, -5],
  [1, 0, 25],
  [1, 1, -5],
  [1, 2, 9],
  [2, 0, -14],
  [2, 1, 65],
  [2, 2, 25],
  ],
  dataLabels: {
     enabled: true,
     color: '#000000'
  },
  yAxis: 1,
}
],

responsive: {
 rules: [{
  condition: {
   maxWidth: 500
},
chartOptions: {
   yAxis: {
    labels: {
     formatter: function () {
      return this.value.charAt(0);
   }
}
}
}
}]
}

});

HTML代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<div id="container"></div>

解决方案 #

你之前的配置仅设置了色轴两端的颜色，Highcharts默认会在色轴最小值到最大值之间生成连续的线性渐变，如果你的数据正负值的绝对值差异较大，0点不会刚好落在色轴中间位置，就会出现接近0的正数偏红、接近0的负数偏绿的问题。
你可以通过stops属性手动定义色轴的颜色分界，同时保证色轴的min和max绝对值相等，让0点刚好处于色轴中间位置即可实现需求：

修改后的colorAxis配置（所有负数全红、所有正数全绿） #

colorAxis: {
  min: -70, // 取值小于数据中的最小负数，和max绝对值保持一致
  max: 70, // 取值大于数据中的最大正数，和min绝对值保持一致
  stops: [
    [0, '#ff3300'],
    [0.499, '#ff3300'], // 0值以下全为红色
    [0.5, '#009933'], // 0值及以上全为绿色
    [1, '#009933']
  ]
}

如果你需要渐变效果，负数从深到浅红、正数从浅到深绿，可以使用如下配置：

colorAxis: {
  min: -70,
  max: 70,
  stops: [
    [0, '#990000'], // 最小负数对应最深红色
    [0.5, '#ffffff'], // 0值对应白色过渡
    [0.5, '#c6efce'], // 0值以上开始浅绿
    [1, '#009933'] // 最大正数对应最深绿色
  ]
}

你可以根据自己实际数据的极值调整min和max的取值，只要保证两者绝对值相等即可。

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