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/