高图:带有共享色条的多个热图

问题描述

在Highcharts中，同一张图表中可能有多个热图吗?例如，我想获得类似于下图的内容:

In Highcharts, is it possible to have multiple heatmaps in the same chart? For example, I would like to obtain something similar to the picture below:

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

I know I can make a chart for each heatmap and then align all the charts with CSS, but the thing is that I want the heatmaps to have a shared color bar.

推荐答案

您可以创建单个图表并转换其数据.下面的实时示例.

You could create single chart and transform its data. Live example below.

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

这篇关于高图:带有共享色条的多个热图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！