Can I use two "categories" arrays in a stacked bar chart?

Question

I'm using a stacked percentage bar chart in Highcharts. ( This jsfiddle中的输入复选框与我们的图表类似，源自Highcharts网站上的an example。）

我想要做的是在图表的右侧添加另一组“类别”标签。如果左侧有每个酒吧的标签，我想在右侧显示平均值。 （计算这个平均值并将其放入Highcharts配置数据是在服务器端完成的;在小提琴中我只是硬编码了一些虚拟值。）

我尝试过使用多个x轴配置，平均类别标记为opposite: true，将它们放在右侧。我可以看到添加这个正在改变图表，特别是如果我没有将它们放在opposite上，但标签实际上并没有显示我尝试过的任何配置。这可能吗？如果是这样，我还需要做什么呢？

这是jsFiddle示例中的配置：

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: [{
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    }, {
        title: 'Avg.',
        categories: [3.0, 3.3, 3.6, 2.6, 3.0],
      opposite: true
    }],
    yAxis: {
        min: 0,
        title: {
            text: 'Percent fruit consumption'
        }
    },
    plotOptions: {
        series: {
            stacking: 'percent'
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});

Answer 1

您设置了正确的轴，但目前图表并不知道如何处理第二轴。

Highcharts要求轴附有数据系列，或者链接到另一个轴，以便显示它。

如果添加linkedTo属性，它将按要求运行：

xAxis: [{
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
    linkedTo: 0, // <-- now the chart will show it, as long as axis 0 is able to be shown
    title: 'Avg.',
    categories: [3.0, 3.3, 3.6, 2.6, 3.0],
    opposite: true
}]

更新了小提琴：

• http://jsfiddle.net/jlbriggs/z4zkm8v5/2/