Question

它几乎是这样的：https://www.highcharts.com/demo/column-stacked-and-grouped

除了我想在两个堆栈中都有John（或任何其他人）。在我的情况下，每个人都不是男性或女性，他们是两者的一部分。

以下是我的类别和系列：

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

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

Answer 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/

带有共享系列的分组和堆叠列

2 个答案: