HighCharts堆积分组图表 - 与分组护理插件

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插件之一 - 分组类别插件。 我在这里有一些类别和子类别，并计划第一个子类别（男性）应该出现在第一列的下面，第二个（女性）应该出现在第二列的下面，依此类推。

如您所见，我已经失去了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/