在堆积百分比列highcharts中固定列的高度 [英] fix height of column in stacked percentage column highcharts

问题描述

在此示例中，我有一个堆积的百分比柱形图. http://jsfiddle.net/sqgq88rd/5/.我不希望在单击图例时该列始终变为100％，所以我使用了stacking:"stacked"，并且我希望"Total"列始终变为100％，而"part1"列和"part2"列使用其百分比.我将yAxis的最大值固定为100，但列的高度不相等.我尝试这段代码.

I have a stacked percent column chart in this example. http://jsfiddle.net/sqgq88rd/5/. I don't want when I click on legend it the column always becomes 100% so I used stacking : 'stacked' and I want column "Total" always becomes 100%, column "part1" and column "part2" use their percent. I fixed max of yAxis was 100, but height of columns wasn't equal. I try this code .

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column',options3d: {
            enabled: true,
            alpha: 5,
            depth: 100
        },
    },
    title: {
            useHTML: true,
        text: 'Stacked column chart',
        x:-20
    },
    subtitle: {
        useHTML: true,
        text: '',
        x: -20
    },
    xAxis: {
        categories : [ 'CPC','QBPC','QTPC','TTHPC','DNPC','QNAPC','QNPC','BDPC','PYPC','KHPC','GLPC','KTPC','DLPC','DNoPC','CGC','NPMU ','CREB ','PEC ','IT','EMEC ','ETC ','PC3I','CC' ]
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    tooltip :  {
        headerFormat: '<b>{point.x}<b><br/>',
        pointFormat: '{series.name}: <b>{point.tyle}</b><br/>Tỷ lệ: <b>({point.y:.0f}%)<b/>'

      },
    plotOptions: {
      column: {
        stacking: 'stacked'
      },
      series: {
        dataLabels: {
          enabled: true,
          inside: true,
          allowOverlap: true,
          color: '#1C689D',
          style: {
            fontWeight: 'bold'
          },
          formatter: function() {
            return this.point.tyle
          }
        }
      }

    },
    series: [
    {
          name: 'Total',
          data: [{y:100,tyle:3080},{y:100,tyle:527},{y:100,tyle:743},{y:100,tyle:662},{y:100,tyle:1860},{y:100,tyle:1160},{y:100,tyle:946},{y:100,tyle:944},{y:100,tyle:650},{y:100,tyle:1095},{y:100,tyle:650},{y:100,tyle:474},{y:100,tyle:890},{y:100,tyle:1149},{y:100,tyle:1755},{y:100,tyle:640},{y:100,tyle:689},{y:100,tyle:345},{y:100,tyle:176},{y:100,tyle:133},{y:100,tyle:467},{y:100,tyle:266},{y:100,tyle:108}],
          index:1
      },{
          name: 'Part 1',
          data: [{y:6,tyle:179},{y:3,tyle:17},{y:6,tyle:42},{y:1,tyle:9},{y:1,tyle:12},{y:3,tyle:40},{y:1,tyle:13},{y:2,tyle:17},{y:2,tyle:10},{y:4,tyle:46},{y:7,tyle:45},{y:3,tyle:12},{y:5,tyle:47},{y:4,tyle:41},{y:2,tyle:29},{y:3,tyle:16},{y:0,tyle:3},{y:10,tyle:33},{y:5,tyle:8},{y:3,tyle:4},{y:11,tyle:52},{y:0,tyle:0},{y:0,tyle:0}],
          index:2
      },
      {
          name: 'Part 2',
          data: [{y:2,tyle:50},{y:1,tyle:7},{y:2,tyle:18},{y:0,tyle:3},{y:0,tyle:2},{y:1,tyle:14},{y:0,tyle:2},{y:0,tyle:2},{y:1,tyle:5},{y:2,tyle:25},{y:4,tyle:23},{y:0,tyle:1},{y:3,tyle:23},{y:2,tyle:23},{y:1,tyle:15},{y:2,tyle:12},{y:0,tyle:0},{y:4,tyle:15},{y:1,tyle:1},{y:0,tyle:0},{y:9,tyle:26},{y:0,tyle:0},{y:0,tyle:0}],
          index:2
      }
    ]
});

});

如何固定等于100的列的高度?

How can I fix height of columns is equal and equal 100;

推荐答案

您可以使用stacking: 'percent'

Api参考: http://api.highcharts.com/highcharts/plotOptions.column.stacking

示例代码: http://jsfiddle.net/6my8pghf/

致谢.

这篇关于在堆积百分比列highcharts中固定列的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！