javascript - 每个 y Axis 具有自定义颜色的 Highcharts 热图

Question

我正在尝试创建一个具有 3 个 yAxis 类别(经理、机器人、两者)的热图，并且我需要以不同的方式对数据进行着色，例如:经理的最大值 - 为绿色，最小值 - 为红色，并且与机器人相反，最大值 - 为红色，最小值 - 为绿色。我尝试使用 colorAxis.dataClasses 但它仅适用于范围而不适用于 Axis 。

我的代码(不起作用)

$(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