Highcharts 在绿色范围内生成正数，在红色范围内生成负数

Question

我在一个容器中有多个热图。我想设置颜色轴，使正数落在绿色范围内，负数在红色范围内。所以我将colorAxis: minColor 设置为#009933，将colorAxis: maxColor 设置为#ff3300。这并不是将所有负片设置为红色范围，将正片设置为红色范围。我可以使用 Highcharts 做到这一点吗？

这是我的代码：

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);
   }
}
}
}
}]
}

});

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


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

Answer 1

实现此目的的其他方法是在您的 heatmap 中设置每个 data-points 的 color。因此，使用 heatMapChart.series 获取 series 数据，然后使用 for-loop 并访问每个数据的 values - 点。最后，更新您的数据点颜色，即：绿色或红色。

演示代码：

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

var heatMapChart = 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 + '.';
      }
    }
  },

  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'
    },
    showInLegend: false
  }, {
    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'
    },
    showInLegend: false,
    yAxis: 1,
  }],

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

});

//get series...
var dataPoints = heatMapChart.series;
//loop through series
for (var i = 0; i < dataPoints.length; i++) {
  //get data inside series..
  for (var j = 0; j < dataPoints[i].data.length; j++) {
    //update data..
    dataPoints[i].data[j].update({
      color: dataPoints[i].data[j].options.value > 0 ? '#009933' : '#ff3300' //change value depending on value..
    });
  }
}

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


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