在Highcharts中分组堆积条形图 [英] Grouping a stacked bar chart in Highcharts

问题描述

我有一种情况，我需要将某些栏/列分组为逻辑分组以满足业务需求。我不在乎它是一个堆叠的酒吧还是一个堆叠的列，但我需要将某些堆栈分组在一起。单个堆栈仍然需要标记。 Highcharts是我目前的目标，但如果这是不可实现的，我会考虑另一个图书馆的想法。我会对通过plunker，jsfiddle等互动示例非常感兴趣，所以我可以快速确认您正在呈现的想法，或者在需要时提问inteligent跟进问题。

我有一些其他的参数：

• 我的用户体验设计师希望酒吧聚集在一起，所以像 http://blacklabel.github.io/grouped_categories/ 不会工作。我们正在处理大量数据。


• 我需要能够切换快乐和不快乐的细分，比如我会使用标准堆叠条。 li>
  

示例图

 丰田| ######## %% Prius 
 | ###### %%花冠
 | 
本田| ##### %%%%思域
 | ### %%协议
 
'＃'快乐'％'不快乐
  

更新和回应

PawełFus：你错过了'列堆积分组'吗？

I没有错过你提到的Highcharts演示。如果您尝试使用该方法来解决我提交的用例实际上不起作用。这是我尝试解决这个问题时的第一个错误。对我来说，拼写很难，但它基本上可以让你把你的正常堆栈分成更小的堆栈，这对你来说很合理。我只有两件东西叠加在一起，快乐和不快乐，它根本不适用于我。如果我错过了一些东西，我很感兴趣，看看它是如何完成的。

在当前用例中使用'column-stacked-and-grouped'的示例

只有2个数据点将这个结果叠加到一个标准的分组条形图中

  Prius | ######## 
 | %% 
 | 
卡罗拉| ##### 
 | %% 
 
'＃'快乐'％'不快乐
  

如果我有更多的数据点更有帮助，但仍然无法满足我的需求

  Prius | ######## $$$ 
 | %% *** 
 | 
卡罗拉| ##### $$$ 
 | %% *** 
 
'＃'快乐'$'内容'*'不满意'％'不满意
  

Plunker

http://plnkr.co/edit/vlsqdqROL3ekEZxO8YLp?p=preview

模拟图像

http://i.stack.imgur.com/A1riu.png

解决方案

示例： http ：//jsfiddle.net/1ktmb2d2/1/

系列格式：

  series：[{
 name：'Happy'，
 id：'Happy'，
 stack：'Corolla'，
 color：'blue' ，
 data：[20]，
 pointPlacement：-0.25 
}，{
 id：'不快乐'，
名称：'不快乐'，
堆叠：'花冠'，
颜色：'黑色'，
数据：[10]，
 pointPlacement：-0.25 
}，{
 linkedTo：'Happy'，
 stack：'Prius'，
 color：'blue '，
 data：[30]，
 pointPlacement：0.25 
}，{
 linkedTo：'不快乐'，
堆栈：'Prius'，
数据：[30]，
 color：'black'，
 pointPlacement：0.25 
}，{
 linkedTo：'Happy'，
 stack：'Civic'， 
 color：'blue'，
 data：[[1,30]]，
 pointPlacement：-0.25 
}，{
 linkedTo：'不快乐'，
 stack：'Civic'，
 data：[[1,30]]，
 color：'black'，
 pointPlacement：-0.25 
}，{
 linkedTo：'Happy'，
 stack：'Accord'，
 color：'blue'，
 data：[[1,30]]，
 pointPlacement：0.25 
}，{
 linkedTo：'Unha ppy'，
 stack：'Accord'，
 data：[[1,30]]，
 color：'black'，
 pointPlacement：0.25 
}] 
  

有 bug 在Highcharts中为stackedLabels。解决方法是使用简单的标签格式化程序： http://jsfiddle.net/1ktmb2d2/2/

注意：我猜可能会使用稍微不同的格式来获得相同的结果。

<注2：我真的不喜欢plnkr，我用jsFiddle。此外，看起来像Highcharts-ng不支持 stackLabels.formatter ： http://plnkr.co/edit/7bjXpBXppv1UXf0YzGMZ?p=preview

I have a situation that I need to group certain bars/columns into logical grouping for a business need. I do not care if it is a stacked bar or a stacked column but I need to group certain stacks together. The individual stacks still need to be labeled. Highcharts is my current target but if this is not achievable i will entertain the idea of another library. I'd be very interested in a interactive example via plunker, jsfiddle, ect so i can confirm quickly the idea you are presenting or ask inteligent follow up questions if needed.

Some other parameters i have:

• My UX designers want the bars to be clusters together so things like http://blacklabel.github.io/grouped_categories/ wont work. We are working with a good amount of data.
• I need to be able to toggle the 'happy', and 'unhappy' segments like i would do with a standard stacked bar.

Example Chart

Toyota | ########%% Prius
       | ######%%   Corolla
       |
Honda  | #####%%%%  Civic
       | ###%%      Accord

'#' Happy '%' unhappy

Updates and Responses

Paweł Fus: Did you miss 'column-stacked-and-grouped'

I did not miss the demo in Highcharts that you mentioned. If you attempt to use that method to solve the use case i presented it actually doesn't work. This was my first mistake when I was attempting to solve this problem. It's hard for me to put into words but it basically allows you to take your normal "stack" and split it out into smaller stacks in some way that makes sense for you. I only have two things stacked, "Happy" and "unhappy", it doesn't work for me at all. If I have missed something tho i'm very interested to see how it is done.

Example using 'column-stacked-and-grouped' in current use case

With only 2 data points to stack this results into a standard grouped bar chart

Prius  | ######## 
       | %%
       |
Corolla| #####
       | %% 

'#' Happy '%' unhappy

If i have more datapoints it is more helpful but still doesnt get to what i need

Prius  | ########$$$ 
       | %%***
       |
Corolla| #####$$$
       | %%*** 

'#' Happy  '$' Content '*' Distatisfied '%' Unhappy

Plunker

http://plnkr.co/edit/vlsqdqROL3ekEZxO8YLp?p=preview

Mocked image

http://i.stack.imgur.com/A1riu.png

解决方案

Example: http://jsfiddle.net/1ktmb2d2/1/

Series format:

    series: [{
        name: 'Happy',
        id: 'Happy',
        stack: 'Corolla',
        color: 'blue',
        data: [20],
        pointPlacement: -0.25
    }, {
        id: 'Unhappy',
        name: 'Unhappy',
        stack: 'Corolla',
        color: 'black',
        data: [10],
        pointPlacement: -0.25
    }, {
        linkedTo: 'Happy',
        stack: 'Prius',
        color: 'blue',
        data: [30],
        pointPlacement: 0.25
    }, {
        linkedTo: 'Unhappy',
        stack: 'Prius',
        data: [30],
        color: 'black',
        pointPlacement: 0.25
    }, {
        linkedTo: 'Happy',
        stack: 'Civic',
        color: 'blue',
        data: [ [1,30] ],
        pointPlacement: -0.25
    }, {
        linkedTo: 'Unhappy',
        stack: 'Civic',
        data: [ [1, 30] ],
        color: 'black',
        pointPlacement: -0.25
    }, {
        linkedTo: 'Happy',
        stack: 'Accord',
        color: 'blue',
        data: [ [1, 30] ],
        pointPlacement: 0.25
    }, {
        linkedTo: 'Unhappy',
        stack: 'Accord',
        data: [ [1, 30] ],
        color: 'black',
        pointPlacement: 0.25
    }]

There is bug in Highcharts for stackedLabels. Workaround will be to use simple label formatter: http://jsfiddle.net/1ktmb2d2/2/

Note: It may be possible to use a slightly different format for series and get the same result, I guess.

Note2: I really don't like plnkr, o I used jsFiddle. Also, looks like Highcharts-ng doesn't support stackLabels.formatter: http://plnkr.co/edit/7bjXpBXppv1UXf0YzGMZ?p=preview

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