我有一种情况需要将某些条/列分组为逻辑分组以满足业务需求.我不在乎它是堆叠条还是堆叠柱,但我需要将某些堆栈组合在一起.单个堆栈仍需要标记. 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://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