javascript - Highcharts:按百分比分组的列

Question

我的问题类似于this one或 this one ，除了我没有简单的系列，而是数据组。

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

这是一个绝对值 (fiddle) 的示例:

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]
}];


// CHART

$('#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
            }
        }
    },
    title :
    {
        text : 'Example'
    },
    series : data
});

在这个例子中，我有三个组(“组 1”、“组 2”和“组 3”)和四个数据(“A”、“B”、“C”和“D”)。

我想显示每个组的“A”、“B”、“C”和“D”的百分比，而且我希望在单击图例中的某个项目时更新该百分比隐藏/显示数据(就像处理堆叠列一样)。实际上它就像一个“堆叠百分比列”图表，只是我不想堆叠列...

Answer 1

您好这里的结帐示例可以解决您的问题。

http://jsfiddle.net/Evsw4/63/ .

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

API 引用:http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter

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

            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 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
});