Highcharts将多条轴的条形图分组 [英] Highcharts grouped bar charts with multiple axes

问题描述

我对这里的答案不满意：
多个y轴用于高图中的列图类别

据我所知，您可以使用yAxis创建多个y轴：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：[{
名称：'John'，
数据：[5,3,0.4]，
}，{
名称：'Joe'，
数据：[3,4,0.6] ，
}，{
 name：'Jane'，
 data：[2,5,7.7]，
}，{
名称：'Janet'，
 data：[3,0,0.8]，
}] 
}）; 
  

解决方案

所以这里是我对您问题的解决方案。
我希望这是你正在寻找的东西，我希望你觉得这有帮助。

当你想把数据分成三类，分别是两个不同的yAxis '你不得不像这样将它分开。百分比与系列相关联。

如果您想要它回到柱状图，只需将图表类型更改为列。

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

 系列：[{
 name：'John'，
 id：'s1'，
数据：[5,3]，
}，{
 //链接到id s1 
 linkedTo：'s1'，
名称：'John'，
 data：[
 //将0.4％添加到第二个数组中的第二个数组
 // 
 [2，0.4] 
]，
 //将百分比分配给第二个yAxis 
 yAxis：1，
 color：Highcharts.getOptions（）。colors [0] 
}，
  

I was unsatisfied with the answer here: Multiple y-axes for column graph categories in highcharts

I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?

In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?

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

解决方案

So here's my solution to your problem. I hope this is what you are looking for and I hope you find this helpful.

When you want to put the data into three categories with two different yAxis' you'd have to split it up in series like this. The percent is linked to the series with the values.

If you want it back to a column chart, just change the chart type to column.

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]
  },

这篇关于Highcharts将多条轴的条形图分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！