5

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

我还有一些其他参数：

  • 我的 UX 设计师希望这些条形图聚集在一起，这样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

普朗克

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

模拟图像

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

4

3 回答 3

3

Example: http://jsfiddle.net/1ktmb2d2/1/

Series format:

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

There is bug in Highcharts for stackedLabels. Workaround will be to use simple label formatter: http://jsfiddle.net/1ktmb2d2/2/

Note: It may be possible to use a slightly different format for series and get the same result, I guess.

Note2: I really don't like plnkr, o I used jsFiddle. Also, looks like Highcharts-ng doesn't support stackLabels.formatter: http://plnkr.co/edit/7bjXpBXppv1UXf0YzGMZ?p=preview

于 2014-09-01T12:22:53.123 回答
0

只需对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'
    }
}
于 2018-11-09T13:04:25.020 回答
-1

我面临着类似的问题，这就是我为解决它所做的。

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

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

于 2018-09-04T21:42:57.980 回答