highcharts 如何生成最高分级快照图表?

11dmarpk  于 2023-04-30  发布在  Highcharts
关注(0)|答案(1)|浏览(147)

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

我不知道如何包括下面的部分,其中显示了各种数字评级在一个瓷砖图表风格(“老板评级”,“原因”等)。在示例图像中)。
下面的部分可以包括使用heatmap,但我不知道如何合并它与上面的情节。

**如何在堆叠图表图下方包含带有标签的图块?**如果不能使用Highcharts,我也可以使用另一个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],    
    }]
  });
tkclm6bt

tkclm6bt1#

请参考此现场演示: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引用:

相关问题