在 Highcharts 中分组图例答案

【问题标题】：Grouping Legends in Highcharts在 Highcharts 中分组图例
【发布时间】：2013-04-02 08:00:39
【问题描述】：

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

$(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 组合为另一个组。

【问题讨论】：

当您说您有 2 个图表时，您的意思是您有多个包含 2 个点的系列吗？ 2系列多点？ 2 个完全不同的图表？
你能告诉我们你目前使用的代码吗？
参考这个jsfiddle.net/cindrella_agi/6gw5P 我有类似的酒吧。我想将 janet 和 jane 组合为一个组，将 joe 和 john 组合为另一个组。
你不能在不丢失信息的情况下这样做。看我的回答。

标签： javascript highcharts

【解决方案1】：

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

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

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

linkedTo:':previous'

【讨论】：

这很酷。赞成。尽管如此，颜色仍然令人困惑。
是的，我认为没有很好的方法来处理颜色。不过我们可以做得更好...jsfiddle.net/jlbriggs/6gw5P/4

【解决方案2】：

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

showInLegend: false

例如：

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

【讨论】：

这是我正在寻找的解决方案，其他一切都太复杂了，更重要的是，没有奏效。但是，我还为我确实想要包含在图例中的数据点添加了 showInLegend: true - 它运行良好。谢谢雅各布！

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 } }
        }
        ]

【讨论】：