如何生成topgrading快照图表？

Question

我想使用任何jquery库生成一个顶级快照图表，如下所示。但到目前为止，我只成功生成了图表的顶部（示例图像中的“Salary”）。 Here is my first attempt using Hicharts（下面的代码），

我不知道如何包括下面的部分，它以瓦片图表样式显示各种数字评级（示例图像中的“老板评级”，“原因”等）。

可以使用heatmap包含下半部分，但我不知道如何将其与上面的情节相结合。

如何在堆积图表下方添加标签？如果使用Hicharts不可能，我也可以使用其他jQuery库。

下面是我到目前为止的示例代码：

HTML：

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript的：

Highcharts.chart('container', {
    chart: {
        type: 'area',
        spacingBottom: 20
    },
    title: {
        text: 'Fruit consumption *'
    },
    subtitle: {
        text: '* Jane\'s banana consumption is unknown',
        floating: true,
        align: 'right',
        verticalAlign: 'bottom',
        y: 15
    },
    legend: {
        layout: 'horizontal',
        align: 'bottom',
        verticalAlign: 'bottom',
        x: 150,
        y: 100,
        floating: false,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme &&    
                             Highcharts.theme.legendBackgroundColor) ||
                         '#FFFFFF'
    },
    xAxis: {
        categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 
                    'Grapes', 'Plums', 'Strawberries', 'Raspberries']
    },
    yAxis: {
        title: {
            text: 'Y-Axis'
        },
        labels: {
          formatter: function () {
                return this.value;
          }
        }
    },
    tooltip: {
        formatter: function () {
          return '<b>' + this.series.name + '</b><br/>' +
            this.x + ': ' + this.y;
          }
    },
    plotOptions: {
        area: {
          fillOpacity: 0.5
        }
    },
    credits: {
        enabled: false
    },
    series: [{
          name: 'John',
          data: [4,5]
        }, {
          name: 'Jane',
          data: [2,2],  
        }, {
          name: 'Jane',
          data: [1,1],          
        }, {
          name: 'Jane',
          data: [null,null,4,6],      
        }, {
          name: 'Jane',
          data: [null,null,2,2],   
        }, {
          name: 'Jane',
          data: [null,null,1,1],    
    }]
  });

Answer 1

请参阅此现场演示： http://jsfiddle.net/kkulig/us14vpa7/

我为hetmap系列创建了一个单独的y轴，并设置了主轴＆＃39;高度为'70%'，以便低于0的值的刻度线和标签不可见。 linkedTo导致辅助轴与主要轴具有相同的极值（热图系列不会叠加在区域系列上）。

  yAxis: [{
    // primary
    min: -3,
    height: '70%',
    min: 0
  }, { // heatmap series axis
    visible: false,
    linkedTo: 0,
  }],

每个区域系列都有相应的热图系列。热图中的colsize属性是相应区域系列中最低和最高x值之间的距离：

// first block
{ // area series
  type: 'area',
  data: [
    [0, 0],
    [0, 4],
    [1.5, 7],
    [1.5, 0]
  ],
  marker: {
    enabled: true
  }
}, { // corresponding heatmap series
  type: 'heatmap',
  data: [
    [0.75, -0.5, 0],
    [0.75, -1.5, 0]
  ],
  colsize: 1.5
}

API参考：

• https://api.highcharts.com/highcharts/series.heatmap.colsize
• https://api.highcharts.com/highcharts/yAxis.linkedTo