グループ化されたハイチャートのグループ化されたグラフ - グループ化された看護援護者のプラグイン

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' 
    }, 
    ] 
}) 

}）以下のサンプルコードを有するとフィドルリンクを持っています。グループ化・カテゴリーのプラグイン - ここhighchartsとhighchartsプラグインのいずれかを使用して

https://jsfiddle.net/9o64ybo4/

。 私はここにいくつかのカテゴリとサブカテゴリを持ち、最初の列の下に1番目のサブカテゴリ（男性）を、2番目の列の下に2番目の列（女性）を表示するように計画しています。

私は、（ブドウとAppBananasles）のような2つのトップレベルのカテゴリを失っていることがわかります。

ご了承ください。

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/

ポイントの配置では、2つのスタックを持っており、各カテゴリが第二のスタック用の空きスペースを作成するので、それが必要な場合があり、左/右に列を移動することができます。

異なるスタックを使用しない別のアプローチでは、null値を追加することでデータを少し再編成できます。

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/