Highcharts 固定堆积百分比柱高图表中的柱高

在本例中，我有一个堆积百分比柱状图。我不希望当我点击图例时，列总是变成100%，所以我使用了堆叠：“堆叠”并且我希望列“总计”总是变成100%，列“部分1”和列“部分2”使用它们的百分比。我确定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
      }
    ]
});

$（函数（）{
$（“#容器”）。高图({
图表：{
类型：“列”，选项3D:{
启用：对，
阿尔法：5，
深度：100
},
},
标题：{
是的，
文本：“堆叠柱形图”，
x:-20
},
副标题:{
是的，
文本：“”，
x:-20
},
xAxis：{
类别：[‘CPC’、‘QBPC’、‘QTPC’、‘TTHPC’、‘DNPC’、‘QNAPC’、‘QNPC’、‘BDPC’、‘PYPC’、‘KHPC’、‘GLPC’、‘KTPC’、‘DLPC’、‘DNoPC’、‘CGC’、‘NPMU’、‘CREB’、‘PEC’、‘IT’、‘EMEC’、‘ETC’、‘PC3I’、‘CC’]
},
亚克斯：{
分:0,，
最高：100，
标题：{
文本：“”
},
堆叠标签：{
启用：false，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“灰色”
}
}
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:'{series.name}:{point.tyle}
Tỷ Lệ: （{point.y:.0f}%）'
},
打印选项：{
专栏：{
堆叠：“堆叠”
},
系列：{
数据标签：{
启用：对，
里面:对,，
allowOverlap：是的，
颜色：“#1C689D”，
风格：{
fontWeight:“粗体”
},
格式化程序：函数（）{
把这个还给我
}
}
}
},
系列：[
{
名称：'总计'，
{y:100，泰勒：743}，{y:100，泰勒：743}，{y:100，泰勒：743}，{{y:100，泰勒：662}，{{y:100，泰勒：100，泰勒：100，泰勒：100，泰勒：1860}，{y:100，泰勒：3080，3080}，{y:100，泰勒：100，泰勒：527 7}，{{y:100，泰勒：100，泰勒：743:743}，，{，，{{{y:100，743:100，743}，，，，，{y:100，泰勒：744}，，{{{y:100，泰勒：944}，}，，{{{y:100，泰勒：944}，}，{{{{y:100，泰勒：944}，，{{{{100，周五：100，泰勒：944}，}，，{100，650，650，y: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}]，
索引：1
},{
名称：“第一部分”，
{y:6，泰勒：42}，{y:1，泰勒：9}，{y:1，泰勒：9}，{y:1，泰勒：1，泰勒：9}，{y:1，泰勒：1，泰勒：6，泰勒：6，泰勒：6，泰勒：6，泰勒：1，泰勒：3，泰勒：3，泰勒：40}，{y:1，泰勒：1，泰勒：13}，{y：2，y：2，泰勒：17}，{y：2，泰勒：17，10}，{y：2，10，{{y：1，10，{y：4，10，10}，{{y：4，10，10，10}，{，{{，4，4，4，4，10}，{，46}，，{，y：4，y：4，17，7，17，7，7，7，7，7，7，7，7，7，7，5，45，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}，{，
索引：2
},
{
名称：‘第二部分’，
{y:2，泰勒：2，泰勒：50}，{{y:2，泰勒：7}，{y:2，泰勒：18}，{y:0，泰勒：3}，{y:0，y:2，泰勒：2{，{{y:2，泰勒：2，泰勒：2，5}，{{y：0，y:0，y：0，y：2，2，5}，{y：0，y：0，3，3，3，5}，{y：0，0，0，3，0，3，1，2，2，2，2，3，2，2，2，2，2，2，2，2，2，2，2，2，2，2，3，5，，，{0，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3，0，0，0，3，3，0，是的，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}，{，
索引：2
}
]
});

}))

---

如何确定列的高度等于或等于100；

您可以使用

堆叠：“百分比”

Api参考：

示例代码：

---

关于。

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

那么，你的第一点，你的

100

，加上

6

，再加上

2

，总共108。 以此类推，每个点的高度都不同

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

例如：

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

更新小提琴：

输出：

---

谢谢您的回复，但我不希望当我单击legend it时，列总是变成100%，所以我使用了stacking:“stacking”。我希望您理解我的问题。您可以使用：

plotOptions.column.groupPadding:0.5

将您的“total”系列放在其他两个系列后面。谢谢。我想我可以根据您在本li中的示例解决我的问题nk:。@stpoa。你的例子正是我想要的，但我有一个小问题，我不想要固定点宽度，我想要其他屏幕的列宽度是动态的？我可以怎么做？你可以用图表动态设置点宽度。回流谢谢。但我想，当我点击图例时，列“总计”总是变成100%，列“第1部分”和列“第二部分"使用它们的百分比。我怎么能做到这一点？我的意思是，这就是100%层叠加的目的：）我想我不明白为什么这个功能会很重要。一般来说，把空白填充到100%的想法只是凌乱了图表，使它更难理解数据。在这张图表中，你几乎看不到任何数据。我会首先推荐更好的方法来可视化这些数据。也就是说，要使

total

系列始终为100%，您必须为total-100、100-part1和100-part2创建3个数据数组。捕获

legendItemClick

事件，检测哪些系列可见，并使用

setData（）

方法，使用适当的数组更新数据。或者，更简单的解决方案：使用完整的“100”值系列；将y轴最大值设置为100:：）谢谢。我将根据您的解决方案尝试修复。