Highcharts，具有共享图例项的多层条形图答案

【问题标题】：Highcharts, multi stacked bar with shared legend itemsHighcharts，具有共享图例项的多层条形图
【发布时间】：2014-07-07 15:04:36
【问题描述】：

我有这组数据是

                            Serie 1    Serie 2
Category 1     2005         20         10              
               2006         30         15
Category 2     2005         35         17
               2006         25         12

看这个小提琴： http://jsfiddle.net/X4g4Q/

我已经检查了诸如提供系列 ID 之类的选项以及linkedTo http://api.highcharts.com/highcharts#plotOptions.bar.linkedTo之类的东西

但我发现没有一种方法可以让多个堆叠条“共享”一个图例项目（因此颜色）。我的数据格式是否错误，或者这根本不可能使用 highcharts？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

也许是 linkedTo:':previous', 。看看这个fiddle

【讨论】：

这不是解决方案，因为颜色仍然不同。实际上我认为这种行为是一个错误，因为单击颜色上的图例将隐藏 2 种颜色（包括不同的颜色）。
您可以为每个系列设置颜色，然后链接到图例 id 或以前的图例。我更新小提琴

【解决方案2】：

可以在图例中隐藏两个系列（同名），捕捉legendItemClick并结合显示/隐藏动作。

events:{
                legendItemClick:function(){
                    var name = this.name,
                        series = this.chart.series;

                    $.each(series, function(i,serie){
                        if(serie.name == name) {
                            if(serie.visible)
                                serie.hide();
                            else
                                serie.show();
                        }
                    });

                    return false;
                }
            },

http://jsfiddle.net/X4g4Q/3/

【讨论】：

【解决方案3】：

linkedTo 选项允许您为 n 系列拥有一个图例项。这与系列颜色无关。如果要使用相同的颜色，直接为系列设置，见：http://jsfiddle.net/6bgvz/

var colors = Highcharts.getOptions().colors; // get colors

// in options:

series: [{ 
    color: colors[0]
}, { 
    colors: colors[1]
} ... ]

【讨论】：

同意。这对我来说很清楚。但这是否意味着没有办法让 highcharts 来“理解”两个条形图“共享”它们的堆叠元素？
没有这样的选项。系列是独立的，您只能连接它们的图例项和轴（通过设置系列x/yAxis: index 使两者相同）。如果您总是只有两个系列，那么您可以通过仅设置两种颜色来解决颜色问题，请参阅：jsfiddle.net/6bgvz/1（第 8 行）。