Javascript Highcharts：带百分比的分组列

我的问题类似于or，只是我没有一个简单的序列，而是一组数据

基本上，我只想要一个具有“堆叠百分比列”图表行为的图表，但不需要堆叠列

下面是一个绝对值（）的示例：

在这个示例中，我有三个组（“组1”、“组2”和“组3”）和四个数据（“A”、“B”、“C”和“D”）

---

我想显示每组“A”、“B”、“C”和“D”的百分比，并且我想在单击图例项以隐藏/显示数据时更新该百分比（就像它用于堆叠列一样）。实际上，它就像一个“堆叠百分比列”图表，除了我不想堆叠列…

嗨，这里的结帐示例解决了您的问题

可以使用formatter函数格式化数据标签。请注意，如果定义了格式，则格式优先，而忽略格式化程序

API参考号：

格式化程序函数的代码，用于显示百分比和组

            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal += parseInt(mychart.series[i].yData[0]);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }

数据标签：{
启用：对，
格式化程序：函数（）{
var mychart=$（“#容器”）.highcharts（）；
var-mytotal=0；
对于（i=0；i

完整代码：

var data = [{
    name: 'A',
    data: [72, 50, 52]
}, {
    name: 'B',
    data: [23, 41, 12]
}, {
    name: 'C',
    data: [18, 9, 11]
}, {
    name: 'D',
    data: [89, 46, 54]
}];
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Group 1', 'Group 2', 'Group 3']
    },
    yAxis: {
        title: {
            text: null
        }
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true
            }
        },
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal += parseInt(mychart.series[i].yData[0]);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }
    },
    title: {
        text: 'Example'
    },
    series: data
});

var数据=[{
名称：‘A’，
数据：[72,50,52]
}, {
名称：‘B’，
数据：[23,41,12]
}, {
名称：‘C’，
数据：[18,9,11]
}, {
名称：“D”，
数据：[89、46、54]
}];
$（“#容器”）。高图({
图表：{
类型：“列”
},
xAxis：{
类别：[‘第一组’、‘第二组’、‘第三组’]
},
亚克斯：{
标题：{
文本：空
}
},
工具提示：{
分享：真的
},
打印选项：{
专栏：{
数据标签：{
已启用：true
}
},
系列：{
数据标签：{
启用：对，
格式化程序：函数（）{
var mychart=$（“#容器”）.highcharts（）；
var-mytotal=0；
对于（i=0；i

那么，当我隐藏A时，会发生什么呢？在我的例子中，对于“第1组”，我会用百分比表示：A=36%，B=11%，C=9%，D=44%。隐藏A后，我希望更新百分比而不计算A，在这种情况下给出：B=18%，C=14%，D=68%。因此您需要捕获legendItemClick事件并计算eah值，然后逐点更新。update（）函数好的，谢谢Sebastian的回答。我希望Highcharts中会有一个内置的解决方案，但我会按照你的建议去做。无论如何，如果能够对未堆叠的图表使用“百分比”属性，那就太好了……您可以在我们的网站上发布您的建议谢谢技术官僚的回答。这确实是一个很好的解决方案，我想这就是我在一年前遇到这个问题时所做的。我只是希望有一个内置的解决方案，没有自定义的格式化程序，但似乎没有。这个图表还包括系列和组的组合，所以它很复杂，可能没有任何内置的解决方案，我检查了它，最后使用它，并使用自定义格式化程序开发。

var data = [{
    name: 'A',
    data: [72, 50, 52]
}, {
    name: 'B',
    data: [23, 41, 12]
}, {
    name: 'C',
    data: [18, 9, 11]
}, {
    name: 'D',
    data: [89, 46, 54]
}];
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Group 1', 'Group 2', 'Group 3']
    },
    yAxis: {
        title: {
            text: null
        }
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true
            }
        },
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal += parseInt(mychart.series[i].yData[0]);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }
    },
    title: {
        text: 'Example'
    },
    series: data
});