javascript - Highcharts 具有多个轴的分组条形图

Question

我对这里的答案不满意: Multiple y-axes for column graph categories in highcharts

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

在下面的示例中，我想要 3 个组(计数 A、计数 B、百分比)，每个组有 4 个人(约翰、乔、简、珍妮特)。除了在一个轴上设置计数组并在另一个轴上设置百分比组之外，我该怎么做？

$('#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]
  },