javascript - 在 Highcharts 中分组图例

Question

我有两个堆叠的条形图，但是（两个条形的）所有图例都显示在一起。我想根据堆叠在栏中的项目对图例进行分组。有人能帮我吗？

$(function () {
        $('#container').highcharts({

            chart: {
                type: 'bar'
            },

            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },

            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },

            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },

            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },

            plotOptions: {
                bar: {
                    stacking: 'normal'
                }
            },

            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2],
                stack: 'male'
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                stack: 'male'
            }, {
                name: 'Jane',
                data: [2, 5, 6, 2, 1],
                stack: 'female'
            }, {
                name: 'Janet',
                data: [3, 0, 4, 4, 3],
                stack: 'female'
            }]
        });
    });

我有类似的酒吧。我想将珍妮特和简归为一组，将乔和约翰归为另一组。

Answer 1

根据您链接到的参考示例，您可以使用版本 3 中的新系列“linkedTo”属性来执行此操作。

http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

更新示例：http: //jsfiddle.net/jlbriggs/6gw5P/2/

linkedTo:':previous'

Answer 2

我知道这是一个老问题，但是在你的系列上设置 showInLegend 会起作用，而且似乎是最简单的方法。

showInLegend: false

例如：

series: [{
 name: 'John',
 data: [5, 3, 4, 7, 2],
 stack: 'male',
 showInLegend: false
}

Answer 3

您不能按堆栈对图例进行分组，因为那样您将失去识别不同组件的能力（即，单个系列将没有不同的颜色，或者图例颜色与它们不匹配）。图例映射到人们，因为这些都是不同的数据源，并且由于您以这种方式添加它们，因此它会像那样显示它们。

如果您不关心具有不同颜色的不同组件，那么您根本不需要堆叠条形图。你可以有一个正常的条形图，有 2 个系列，男性和女性。

series: [{
                name: 'Male',
                data: [10, 7, 8, 9, 7]
            },
                name: 'Female',
                data: [5, 5, 10, 6, 4]
            }
        }

Answer 4

您可以使用 ids 和linkedTo. 在下面的示例中，第一个系列链接到第二个系列：

series: [
        {
            type: 'column',
            name: '',
            data: [],
            linkedTo: 'second_serie_id',            // <--- this
            color: '#DE3733',
            pointWidth: 1,
            showInLegend: false,
        },
        {
            id: "second_serie_id",                  // <--- this
            type: 'scatter',
            name: 'FFT 1',
            data: [],
            color: '#DE3733',
            lineWidth: 0,
            showInLegend: true,
            states: { hover: { enabled: false } }
        }
        ]