我可以在堆叠条形图中使用两个"categories"数组吗？

Question

我在Highcharts中使用堆叠百分比条形图。（这个jsfiddle类似于我们的图表，源自Highcharts网站上的一个例子。）

我想做的是在图表的右侧添加另一组"类别"标签。左边每个小节都有标签，我想在右边显示一个平均值。（计算这个平均值并将其放入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/