javascript - Highcharts分组堆栈x.轴名称+类别名称

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

要按照您想要的方式显示栏，您需要从所有系列中删除 stack 属性。为什么要保存它们？它们用于将系列分组。我还使用 x 属性更正了标签的位置。

API引用:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack http://api.highcharts.com/highcharts/xAxis.labels.x

示例:
http://jsfiddle.net/sjtdgq9L/