Question

我试图将我的高图图形看起来像这样或类似于此。

我曾尝试将分组类别插件用于高级图表，但它似乎不适用于堆栈选项。

JSFiddle中的

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/

Answer 2

在我的项目中，使用堆栈可以让我更好地控制分为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 3

将您的系列更改为： -

系列：[{ 名称：＆＃39; x＆＃39;，数据：[5,3,4,5] }，{ 名称：＆＃39; y＆＃39;，数据：[3,5,4,5] }，{ 名称：＆＃39; x＆＃39;，数据：[5,3,4,5] }，{ 名称：＆＃39; y＆＃39;，数据：[3,5,4,5] } ]

Highcharts Grouped堆栈x.axis名称+类别名称

3 个答案: