Question

此示例中我有一个堆积百分比柱形图。 http://jsfiddle.net/sqgq88rd/5/。我不希望当我点击图例时它的列总是变为100％所以我使用了堆叠：'堆积'而我希望列“总计”总是变为100％，列“part1”和列“part2”使用它们的百分比。我修正了yAxis的最大值为100，但列的高度不相等。我试试这段代码。

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

Answer 1

您可以使用stacking: 'percent'

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

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

问候。

Answer 2

现在，您将总数设置为100，然后将其他两个系列设置为值，并将它们全部堆叠在一起。

所以，您的第一点，即100，加上6，再加上2，共计108个。依此类推，对于每一点，都会使它们处于不同的高度。

您需要从“总计”系列中减去“第1部分”和“第2部分”的值。

示例：

$.each(totalData, function(i, point) {
  totalData[i].y = (totalData[i].y - part1Data[i].y - part2Data[i].y);
})

更新了小提琴：

http://jsfiddle.net/sqgq88rd/7/

输出：

在堆叠的百分比列highcharts中固定列的高度

2 个答案: