在Highcharts中對堆積條形圖進行分組

Question

我有一種情況需要將某些條/列分組為邏輯分組以滿足業務需求。 我不在乎它是堆疊條還是堆疊柱，但我需要將某些堆棧組合在一起。 單個堆棧仍需要標記。 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://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中有堆疊標簽的錯誤 。 解決方法是使用簡單的標簽格式化程序： http ： //jsfiddle.net/1ktmb2d2/2/

注意：我猜可能會對系列使用稍微不同的格式並獲得相同的結果。

注2：我真的不喜歡plnkr，o我用的是jsFiddle。 此外，看起來像Highcharts-ng不支持stackLabels.formatter ： http ： stackLabels.formatter

Answer 2

只需將下面給出的更改發送到https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped/並獲得分組堆疊高圖中的條形圖。

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插件使用的格式。