Highcharts: сгруппированные и сложенные легенды

Question

У меня в настоящее время есть легенда, как Джо и Джон.Мне нужно иметь легенду о мужчине и женщине.Как добавить мужскую и женскую легенду к этому.пожалуйста, помогите мне.

Это JSFiddle кода, который я пробовал до сих пор.

Также создан нижеприведенный фрагмент кода, если он будет любогопомощь.

Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  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: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male',
    color: "#1f77ac",
    id: 'John'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male',
    color: "#098ebb",
    id: 'Joe'
  }, {
    name: 'John',
    data: [2, 5, 6, 2, 1],
    stack: 'female',
    linkedTo: 'John',
    color: "#1f77ac"
  }, {
    name: 'Joe',
    data: [3, 2, 4, 4, 3],
    stack: 'female',
    linkedTo: 'Joe',
    color: "#098ebb",
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

Вы можете добавить пустую серию с именами: male и female.Для обработки события щелчка используйте функцию legendItemClick:

series: [..., {
    name: 'male',
    events: {
        legendItemClick: function() {
            // hide some series
        }
    }
}, {
    name: 'female',
    events: {
        legendItemClick: function() {
            // hide some series
        }
    }
}]

Демонстрационная версия: https://jsfiddle.net/BlackLabel/6x52kzqd/

Справочник по API: https://api.highcharts.com/highcharts/series.line.events.legendItemClick