HighCharts сложены сгруппированные диаграммы - с сгруппированными плагинами Caregories

Question

Имейте проблему, возможно, я смешал больше вещей, тогда должно быть, но в любом случае будет приятно разобраться в этом.

Уже скрипку связь с кодом с образцом ниже

$(function() { 
    $('#container').highcharts({ 
    chart: { 
    type: 'column', 
    }, 
    title: { 
     text: '' 
    }, 

    plotOptions: { 
    column: { 
     stacking: 'normal', 
     events: { 
     legendItemClick: function() { 
      var index = this.index; 
      var legendName = this.name; 
      var series = this.chart.series; 
      series.forEach(function(el, index){ 
      if(legendName == el.name) { 
       if(el.visible) 
       el.setVisible(false); 
       else 
       el.setVisible(true); 
      } 
      }); 
      return false; 
     } 
     }, 
    }, 
    }, 

    yAxis: [{ 
    labels: { 
     format: '{value} $', 
     style: { 
     color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    title: { 
     text: 'First Y Axis', 
     style: { 
     color: Highcharts.getOptions().colors[2] 
     } 
    }, 

    }, { 
    gridLineWidth: 0, 
    title: { 
     text: 'Second Y Axis', 
     style: { 
     color: Highcharts.getOptions().colors[0], 
     } 
    }, 
    labels: { 
     format: '{value}', 
     style: { 
     color: Highcharts.getOptions().colors[0] 
     } 
    }, 

    }], 

    xAxis: { 
    labels: { 
     rotation: -90, 
      groupedOptions: [{ 
      rotation: 0, 
     style: { 
      rotation: 0, 
     } 
    }], 

    }, 
    categories: [ 
    { 
     name:'Apples', 
     categories: ['male', 'female'] 
    }, 
    { 
     name:'Oranges', 
     categories: ['male', 'female'] 
    }, 
    { 
     name:'Pears', 
     categories: ['male', 'female'] 
    }, 
    { 
     name:'Grapes', 
     categories: ['male', 'female'] 
    }, 
    { 
     name:'AppBananasles', 
     categories: ['male', 'female'] 
    }] 
    }, 

    series: [ 
    { 
     name: 'John', 
     data: [5, 3, 4, 7, 2], 
     stack: 'male' 
    }, { 
     name: 'Joe', 
     data: [3, 4, 4, 2, 5], 
     stack: 'male' 
    }, { 
     name: 'Jane', 
     data: [2, 5, 6, 2, 1], 
     stack: 'female' 
    }, { 
     name: 'Janet', 
     data: [3, 0, 4, 4, 3], 
     stack: 'female' 
    }, 
    ] 
}) 

});

https://jsfiddle.net/9o64ybo4/

Использование здесь Highcharts и один из плагинов Highcharts - сгруппированных категории плагин. У меня есть некоторые категории и подкатегории и планируется, что 1-я подкатегория (мужчина) должна появиться ниже первых столбцов, а вторая (женщина) должна появиться под вторым столбцом и так далее.

Как вы можете видеть, я потерял 2 категории верхнего уровня, такие как (Виноград и AppBananasles).

Любые предложения будут оценены!

Answer 1

Вам необходимо присвоить категорию точке явно.

series: [ 
      { 
     name: 'John', 
     data: [[0, 5], [2, 3], [4, 4], [6, 7], [8, 2]], 
     stack: 'male', 
    //  pointPlacement: 0.15 
    }, { 
     name: 'Joe', 
     data: [[0, 3], [2, 4], [4, 4], [6, 2], [8, 5]], 
     stack: 'male', 
    //  pointPlacement: 0.15 
    }, { 
     name: 'Jane', 
     data: [[1, 2], [3, 5], [5, 6], [7, 2], [9, 1]], 
     stack: 'female', 
    //  pointPlacement: -0.15 
    }, { 
     name: 'Janet', 
     data: [[1, 3], [3, 0], [5, 4], [7, 4], [9, 3]], 
     stack: 'female', 
    //  pointPlacement: -0.15 
    }, 
    ] 

пример: https://jsfiddle.net/9o64ybo4/1/

размещение точек позволяет переместить столбец вправо/влево, это может быть необходимо, потому что у вас есть два стека и каждая категория создать пустое пространство для второго стека.

Другой подход, без разных стеков, может немного перестроить данные, добавив нулевые значения.

series: [ 
      { 
     name: 'John', 
     data: [5, null, 3, null, 4, null, 7, null, 2, null], 
//  stack: 'male' 
    }, { 
     name: 'Joe', 
     data: [3, null, 4, null, 4, null, 2, null, 5, null], 
//  stack: 'male' 
    }, { 
     name: 'Jane', 
     data: [null, 2, null, 5, null, 6, null, 2, null, 1], 
//  stack: 'female' 
    }, { 
     name: 'Janet', 
     data: [null, 3, null, 0, null, 4, null, 4, null, 3], 
//  stack: 'female' 
    }, 
    ] 

пример: https://jsfiddle.net/9o64ybo4/2/