每个 yAxis 具有自定义颜色的 Highcharts 热图

Question

我正在尝试创建一个包含 3 个 yAxis 类别（经理、机器人、两者）的热图，我需要以不同的方式为数据着色，例如：经理的最大值 - 是绿色，最小值 - 是红色，机器人的相反，最大值 - 是红色，最小值 - 是绿色。 我试图使用 colorAxis.dataClasses 但它仅适用于范围而不适用于轴。

我的代码（不起作用）

$(function () {

$('#container').highcharts({

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80
    },

    title: {
        text: 'Heatmap'
    },

    xAxis: {
        categories: ['01-01-2019', '02-01-2019', '03-01-2019', '04-01-2019', '05-01-2019', '06-01-2019', '07-01-2019', '08-01-2019', '09-01-2019', '10-01-2019']
    },

    yAxis: {
        categories: ['Bot', 'Manager', 'Both'],
        title: null
    },
    colorAxis: [
      {
        minColor: '#ff0000',
        maxColor: '#00ff45'
      }, 
      {
        minColor: '#00ff45',
        maxColor: '#ff0000',
      },
      {
        minColor: '#ffe700',
        maxColor: '#6300ff',
      },
    ],
    legend: {
                    align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25
    },

    series: [{
        name: 'Sales per unit',
        borderWidth: 1,
        data: [[0, 0, 17], [0, 1, 9], [0, 2, 16], [1, 0, 10], [1, 1, 10], [1, 2, 21], [2, 0, 23], [2, 1, 28], [2, 2, 8], [3, 0, 23], [3, 1, 18], [3, 2, 26], [4, 0, 2], [4, 1, 28], [4, 2, 23], [5, 0, 16], [5, 1, 24], [5, 2, 18], [6, 0, 12], [6, 1, 19], [6, 2, 12], [7, 0, 3], [7, 1, 29], [7, 2, 14], [8, 0, 24], [8, 1, 10], [8, 2, 5], [9, 0, 21], [9, 1, 28], [9, 2, 2]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]

});

});

图像例如

我怎样才能达到这个结果？

Answer 1

您需要将数据拆分为 3 个系列并将它们分配给colorAxis ：

series: [{
  data: [
    ...
  ],

}, {
  colorAxis: 1,
  data: [
    ...
  ]
}, {
  colorAxis: 2,
  data: [
    ...
  ]
}]

---

现场演示： http : //jsfiddle.net/BlackLabel/6m4e8x0y/4769/

API参考： https : //api.highcharts.com/highcharts/series.heatmap.colorAxis