适用于Highcharts堆栈组列的x轴

Rob*_*bAu 2 javascript charts highcharts stacked-chart

我正在尝试开发一个图表,使用1个测量和3个维度可视化数据.我在x轴上放了一个维度,一个作为堆栈,一个作为序列列表.

HighCharts具有堆叠分组列图表,我将其作为基础.看我的jsfiddle.

    series: [{
        name: 'John',
        color: '#ff4400',
        data: [5, 3, 4, 7, 2],
        stack: '2014'
    }, {
        name: 'Joe',
        color: '#44ff00',
        data: [3, 4, 4, 2, 5],
        stack: '2014'
    }, {
        name: 'John',
        color: '#ff4400',
        data: [2, 5, 6, 2, 1],
        showInLegend: false,
        stack: '2015'
    }, {
        name: 'Joe',
        data: [3, 0, 4, 4, 3],
        color: '#44ff00',
        showInLegend: false,
        stack: '2015'
    }]
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我希望能够在二级x轴上显示堆栈名称.我知道group-plugin,但这似乎与stacks一起使用.

任何提示?

Rob*_*bAu 9

它可能不是最好的解决方案(所以请继续),但我现在伪造一个数据集.

请参阅jsfiddle更新

  xAxis: [{
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
               {
            categories: ['2014', '2015', '2014', '2015', '2014', '2015','2014', '2015', '2014', '2015'],
                   opposite: true
        }],        
  series: [{
        name: 'John',
        color: '#ff4400',
        data: [5, 3, 4, 7, 2],
        stack: '2014',

    }, {
        name: 'Joe',
        color: '#44ff00',
        data: [3, 4, 4, 2, 5],
        stack: '2014',

    }, {
        name: 'John',
        color: '#ff4400',
        data: [2, 5, 6, 2, 1],
        showInLegend: false,
        stack: '2015'
    }, {
        name: 'Joe',
        data: [3, 0, 4, 4, 3],
        color: '#44ff00',
        showInLegend: false,
        stack: '2015'
    }, {
        name: '',
        data: [0, 0, 0,0, 0, 0,0, 0, 0,0],
        showInLegend: false,
        stack: '2015',
        xAxis: 1            
    }]
Run Code Online (Sandbox Code Playgroud)

结果: 在此输入图像描述

更新

摆弄假轴标签:http://jsfiddle.net/b72e0vh4/8/ 在此输入图像描述