具有共享系列的分组和堆叠列答案

【问题标题】：Grouped and stacked columns with shared series具有共享系列的分组和堆叠列
【发布时间】：2017-10-23 12:19:59
【问题描述】：

差不多是这样的：https://www.highcharts.com/demo/column-stacked-and-grouped

除了我想让约翰（或任何其他人）在两个堆栈中。就我而言，每个人都不是男性或女性，他们是两者的一部分。

这是我的类别和系列：

categories: [
    'Apples', 'Oranges',
],

series: [
    {
        name: 'John',
        data: [1, 9],
        stack: 'Type A',
    },
    {
        name: 'John',
        data: [2, 10],
        stack: 'Type B',
    },
    {
        name: 'Joe',
        data: [3, 11],
        stack: 'Type A',
    },
    {
        name: 'Joe',
        data: [4, 11],
        stack: 'Type B',
    },
    {
        name: 'Jane',
        data: [5, 12],
        stack: 'Type A',
    },
    {
        name: 'Jane',
        data: [6, 13],
        stack: 'Type B',
    },
    {
        name: 'Janet',
        data: [7, 14],
        stack: 'Type A',
    },
    {
        name: 'Janet',
        data: [8, 15],
        stack: 'Type B',
    },
],

但有了这个，我目前的所有名字（珍妮特、乔……）都在图例中重复了。

【问题讨论】：

标签： highcharts

【解决方案1】：

您可以使用showInLegend: false来防止图例重复，并确保对应系列具有相同的颜色：

 series: [{
    name: 'John',
    color: 'orange',
    data: [1, 9],
    stack: 'Type A',
  }, {
    name: 'John',
    color: 'orange',
    data: [2, 10],
    stack: 'Type B',
    showInLegend: false
  }
 ]

这段代码导致该图例对所有具有通用名称的系列执行相同的操作（显示/隐藏）：

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

      var isVisible = series.visible;
      chart.series.forEach(function(s) {
        if (s.name === series.name) {
          if (isVisible) {
            s.hide();
          } else {
            s.show();
          }
        }
      });
      event.preventDefault();
    }
  }

现场工作示例： http://jsfiddle.net/kkulig/cgu0g7vm/

API 参考：

【讨论】：

谢谢。这几乎解决了我的问题。除了我在不同的堆栈中为同一组使用不同的颜色。请参阅我自己的回复，了解我从 highcharts 论坛获得的解决方案。

【解决方案2】：

从the highcharts forum得到这个答案：

要删除图例中的重复名称，您可以在同名的第二个系列中将 series.linkedTo 设置为“:previous”。然后您可以将系列颜色更改为相同。

  series: [{
    name: 'John',
    data: [1, 9],
    stack: 'Type A',
  }, {
    name: 'John',
    data: [2, 10],
    stack: 'Type B',
    linkedTo: ':previous',
    color: Highcharts.getOptions().colors[0]
  },

现场演示：http://jsfiddle.net/ppotaczek/psguhp3r/

【讨论】：