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

Question

我有一种情况，我需要将某些条/列分组为业务需求的逻辑分组。我不在乎它是堆叠的条形图还是堆叠的柱形图，但我需要将某些堆叠组合在一起。仍然需要标记各个堆栈。Highcharts 是我目前的目标，但如果无法实现，我会考虑另一个图书馆的想法。我对通过 plunker、jsfiddle 等的交互式示例非常感兴趣，因此我可以快速确认您提出的想法或在需要时提出智能跟进问题。

我还有一些其他参数：

• 我的 UX 设计师希望条形聚集在一起，这样http://blacklabel.github.io/grouped_categories/ 之类的东西就行不通了。我们正在处理大量数据。
• 我需要能够像使用标准堆叠条一样切换“快乐”和“不快乐”部分。

示例图表

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

'#' Happy '%' unhappy

更新和回应

帕维？Fus：您是否错过了“列堆叠和分组”

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

在当前用例中使用“列堆叠和分组”的示例

仅用 2 个数据点将此结果堆叠到标准分组条形图中

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

'#' Happy '%' unhappy

如果我有更多的数据点，它会更有帮助，但仍然没有达到我所需要的

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

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

普朗克

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

模拟图像

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

Answer 1

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

系列格式：

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

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

注意：我想，可能可以对系列使用稍微不同的格式并获得相同的结果。

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