Highcharts分组堆栈x.axis名称+类别名称

Question

我想让我的highcharts图看起来像这样或类似。

我曾尝试使用类电邮宣传的插件highcharts，但它似乎降下来，不是与堆栈选项很好地工作。

样品中的jsfiddle：http://jsfiddle.net/02ey1hbr/7/

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     labels: { 
        rotation: -0, 
        style: { 
         fontSize: '10px', 
         align: 'Right', 
        } 

       }, 
     categories: [{ 
       name: "Case A", 
       categories: ["Male", "Female"] 
      }, { 
       name: "Case B", 
       categories: ["Male", "Female"] 
      }] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'x-axis' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
    bar: { 
     stacking: 'normal' 
    } 
    }, 

    series: [{ 
     name: 'x', 
     data: [5,3,4,5], 
       stack: 'StackA' 
    }, { 
     name: 'y', 
     data: [3,5,4,5], 
     stack: 'StackA' 
     },{ 
     name: 'x', 
     data: [5,3,4,5], 
       stack: 'StackB' 
    }, { 
     name: 'y', 
     data: [3,5,4,5], 
     stack: 'StackB' 
     } 
    ] 
}); 

Answer 1

在我的项目，使用堆栈可以让我在被分成2个12个的数据集在一系列得到较好的控制栈。 jsfiddle中的示例是一个较小的版本，用于验证概念验证并更好地与社区进行交互。堆栈也使代码更容易维护。

使用：Proper x-axis for Highcharts stack group column作为参考，我能够将我的示例修改为：http://jsfiddle.net/02ey1hbr/11/，并实现了堆栈的工作示例。它不完美，但非常接近。

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: [{ 
      categories: ["Case A", "Case B","Case C", "Case D"], 
      labels: { 
      rotation: -90, 
      x: -60, 
      style: { 
       fontSize: '10px', 
       align: 'Right', 
      } 
      }, 
      tickWidth: 1, 
      tickLength: 60, 
    }, 
    { 
     categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'], 
     opposite: false, 
     labels: { 
      rotation: 0, 
      x: 60, 
      style: { 
      fontSize: '10px', 
      align: 'Right', 
      } 
     }, 
     tickWidth: 0, 
    }], 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'x-axis' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
    bar: { 
     stacking: 'normal' 
    } 
    }, 
    series: [{ 
     name: 'x', 
     data: [1,8,9,16], 
       stack: 'StackA' 
    }, { 
     name: 'y', 
     data: [1,7,10,15], 
     stack: 'StackA' 
     },{ 
     name: 'x', 
     data: [3,6,11,14], 
       stack: 'StackB' 
    }, { 
     name: 'y', 
     data: [4,5,12,13], 
     stack: 'StackB' 
     }, 
     { 
      name: '', 
      data: [0,0,0,0,0,0,0,0], 
      showInLegend: false, 
      stack: 'StackB', 
      xAxis: 1    
     } 
    ] 
}); 

Answer 2

更改系列： -

系列：[{ 名： 'X'， 数据：[5,3,4,5] }，{ 名： 'Y'， 数据：[3,5,4,5] }，{ 名： 'X'， 数据：[5,3,4,5] }，{ 名称：'y'， 数据：[3,5,4,5] } ]

Answer 3

要显示栏，你想要的方式，你需要从所有系列摆脱stack财产。你为什么要保存它们？它们用于将系列分成组。我还使用x属性更正了标签的位置。

API参考：
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack http://api.highcharts.com/highcharts/xAxis.labels.x

例子：
http://jsfiddle.net/sjtdgq9L/