Highcharts将带有多个轴的条形图分组

Question

我对这里的答案不满意: 在高级图表中列图表类别的多个y轴

据我所知,你可以创建多个y轴,可以使用yAxis:0,1,2等为每个系列选择它们.是否可以为条形图组执行此操作？

在下面的示例中,我想要3个组(计数A,计数B,百分比),每个组有4个人(John,Joe,Jane,Janet).除了在一个轴上具有计数组而在另一个轴上具有百分比组之外,我该如何做？

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});

Answer 1

所以这是我解决问题的方法.我希望这是你正在寻找的东西,我希望你觉得这很有帮助.

当你想把数据分成两个不同的yAxis的三个类别时,你必须像这样将它分成串联.百分比与具有值的系列相关联.

如果要将其恢复为柱形图,只需将图表类型更改为列.

http://jsfiddle.net/henrikskar/j1o450z5/

series: [{
       name: 'John',
       id: 's1',
       data: [5, 3],
  },{
        //Links to id s1
     linkedTo: 's1',
     name: 'John',
     data: [
           //Puts 0.4 percent to the third category which is in the second array position
           //of the categories
           [2, 0.4]
     ],
     //Assigns the percent to the second yAxis
     yAxis: 1,
     color: Highcharts.getOptions().colors[0]
  },