Question

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

我有一些其他参数：

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

示例图表

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

'#' Happy '%' unhappy

更新和回复

PawełFus：你错过了'列叠和分组'

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

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

只有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

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中有bug表示已堆叠标签。解决方法是使用简单的标签格式化程序：http://jsfiddle.net/1ktmb2d2/2/

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

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

Answer 2

只需对https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped/进行以下更改并在highchart中获得分组堆积的条形图。

chart: {
        type: 'bar'
},
plotOptions: {
    bar: {
        stacking: 'normal'
    }
}

Answer 3

我正面临类似的问题，这是我为解决该问题所做的事情。

http://jsfiddle.net/ldong/h2jysu9f/

基本上，我拉了http://blacklabel.github.io/grouped_categories/grouped-categories.js并将series，x和y轴自定义为该highchart插件使用的格式。

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

示例图表

更新和回复

PawełFus：你错过了'列叠和分组'

Plunker

模拟图像

3 个答案: