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

我有类似的酒吧。我想把janet和jane组成一个小组，joe和john组成另一组。

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

您无法按堆栈对图例进行分组，因为这样您就无法识别不同的组件（IE或者单个系列不会有明显的颜色，或者图例颜色与它们不匹配）。传说映射给人们，因为这些都是不同的数据源，因为你以这种方式添加它们就像那样显示它们。

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

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

Answer 4

您可以使用 ID 和 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 } }
        }
        ]

在Highcharts中分组传说

4 个答案: