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

您好Checkout示例来解决您的问题。

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

Highcharts：按百分比分组的列

1 个答案: