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

Grouping a stacked bar chart in Highcharts

本文关键字：条形图 Highcharts      更新时间：2023-09-26

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

我有一些其他参数：

  • 我的用户体验设计师希望酒吧成为集群http://blacklabel.github.io/grouped_categories/不起作用。我们正在处理大量的数据
  • 我需要能够像使用标准堆叠条一样切换"快乐"answers"不快乐"片段

示例图表

Toyota | ########%% Prius
       | ######%%   Corolla
       |
Honda  | #####%%%%  Civic
       | ###%%      Accord
'#' Happy '%' unhappy

更新和响应

PawełFus：你错过了"列堆叠和分组"吗

我没有错过你提到的Highcharts中的演示。如果你试图使用这种方法来解决我提出的用例，它实际上是行不通的。这是我试图解决这个问题时的第一个错误。这对我来说很难用语言表达，但它基本上允许你用正常的"堆栈"，并以某种对你有意义的方式将其拆分成更小的堆栈。我只有两件事，"快乐"answers"不快乐"，这对我根本不起作用。如果我错过了什么，我很想看看是怎么做的。

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

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

Prius  | ######## 
       | %%
       |
Corolla| #####
       | %% 
'#' Happy '%' unhappy

如果我有更多的数据点，这会更有帮助，但仍然不能达到我需要的

Prius  | ########$$$ 
       | %%***
       |
Corolla| #####$$$
       | %%*** 
'#' Happy  '$' Content '*' Distatisfied '%' Unhappy

Plunker

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

模拟图像

https://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',
        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中存在错误。解决方法是使用简单的标签格式化程序：http://jsfiddle.net/1ktmb2d2/2/

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

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

我面临着类似的问题，下面是我解决它的方法。

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

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

只需对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'
    }
}
相关文章：