如何生成 topgrading 快照图表？

Question

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

我不知道如何包括下面的部分，它以平铺图表样式显示各种数字评级（示例图像中的 "Boss rating"、"Reason" 等）。

可以使用 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 轴，并将主轴的高度设置为 '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参考：

如何生成 topgrading 快照图表？

how to generate topgrading snapshot chart?

highcharts

stacked-area-chart