Highcharts：带有共享色条的多个热图

Question

在Highcharts中，是否可以在同一个图表中有多个热图？例如，我想获得类似下图的内容：

我知道我可以为每个热图制作一个图表，然后将所有图表与CSS对齐，但问题是我希望热图具有共享的颜色条。

Answer 1

您可以创建单个图表并转换其数据。以下是实例。

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      height: 1000,
      width: 1000
    },

    title: null,

    plotOptions: {
        series: {
            borderColor: 'white'
        }
    },

    colorAxis: {
      min: 0,
      max: 1,
      minColor: 'white',
      maxColor: Highcharts.getOptions().colors[5]
    },

    legend: {
      enabled: false
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        visible: false
    },

    series: [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [...Array(43*43)].map((u, i) => {
        const x = Math.floor(i/43) // Get x value from 0 to 42
        const y = i%43 // Get y value from 0 to 42
        const zeroX = !((x+1) % 9) || !((x+2) % 9) // if point should not be displayed
        const zeroY = !((y+1) % 9) || !((y+2) % 9) // if point should not be displayed
        const v = zeroX || zeroY ? 0 : Math.random() // if point should not be displayed then set its value to 0
        return [x, y, v] // return x y an value of each point
      })
    }]

  });
});

https://jsfiddle.net/k4dvz5r2/show/