javascript – 在Highcharts中对堆积条形图进行分组

我有一种情况需要将某些条/列分组为逻辑分组以满足业务需求.我不在乎它是堆叠条还是堆叠柱,但我需要将某些堆栈组合在一起.单个堆栈仍需要标记. Highcharts是我目前的目标,但如果这是不可实现的,我会接受另一个图书馆的想法.我会通过plunker,jsfiddle等对交互式示例非常感兴趣,因此我可以快速确认您提出的想法,或者在需要时询问智能后续问题.

我有一些其他参数：

>我的用户体验设计师希望将条形集合在一起,因此像http://blacklabel.github.io/grouped_categories/这样的东西不会起作用.我们正在处理大量数据.
>我需要能够切换“快乐”和“不快乐”的细分,就像我使用标准堆叠条一样.

示例图表

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

'#' Happy '%' unhappy

更新和响应

PawełFus：你有没有错过’列叠和分组’

我没有错过你提到的Highcharts中的演示.如果您尝试使用该方法来解决我提出的用例,它实际上是行不通的.这是我试图解决这个问题时的第一个错误.我很难说出来,但它基本上允许你采取正常的“堆栈”,并以某种对你有意义的方式将它分成更小的堆栈.我只有两件事,“快乐”和“不快乐”,它根本不适用于我.如果我错过了一些东西,我很有兴趣看看它是如何完成的.

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

只有2个数据点可以叠加到标准的分组条形图中

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

'#' Happy '%' unhappy

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

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

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

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: 'Unhappy',name: 'Unhappy',color: 'black',data: [10],{
        linkedTo: 'Happy',stack: 'Prius',data: [30],pointPlacement: 0.25
    },{
        linkedTo: 'Unhappy',stack: 'Civic',data: [ [1,30] ],stack: 'Accord',pointPlacement: 0.25
    }]

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

注意：我猜可能会对系列使用稍微不同的格式并获得相同的结果.

注2：我真的不喜欢plnkr,o我用的是jsfiddle.此外,看起来Highcharts-ng不支持stackLabels.formatter：http://plnkr.co/edit/7bjXpBXppv1UXf0YzGMZ?p=preview