具有共享序列的分组和堆叠列

Question

就像这样：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',
    },
],

但是现在我有了所有的名字(珍妮特，乔，.)在传说中复制。

Answer 1

这是高海图论坛给出的答案

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

  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/

Answer 2

您可以使用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引用：

• https://api.highcharts.com/highcharts/plotOptions.series.showInLegend
• https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick