Группировка гистограммы с накоплением в Highcharts

У меня возникла ситуация, когда мне нужно сгруппировать определенные столбцы/столбцы в логическую группу для нужд бизнеса. Мне все равно, будет ли это столбец с накоплением или столбец с накоплением, но мне нужно сгруппировать определенные стеки вместе. Отдельные стеки все еще должны быть помечены. Моя текущая цель - Highcharts, но если это невозможно, я подумаю о другой библиотеке. Я был бы очень заинтересован в интерактивном примере с помощью plunker, jsfiddle и т. Д., Чтобы я мог быстро подтвердить идею, которую вы представляете, или задать интеллектуальные дополнительные вопросы, если это необходимо.

Некоторые другие параметры, которые у меня есть:

  • Мои UX-дизайнеры хотят, чтобы панели были кластерами, поэтому такие вещи, как http://blacklabel.github.io/grouped_categories/ не работает. Мы работаем с большим объемом данных.
  • Мне нужно иметь возможность переключать «счастливые» и «несчастливые» сегменты, как если бы я делал это со стандартной панелью с накоплением.

Пример диаграммы

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

'#' Happy '%' unhappy

Обновления и ответы

Павел Фус: Вы скучали по столбцам, сложенным и сгруппированным?

Я не пропустил демо в 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


javascript highcharts highcharts-ng
person Nexeh    schedule 28.08.2014    source источник
comment
Я думаю, вы пропустили эту демонстрацию из Highcharts: highcharts.com/demo/column- сложенные и сгруппированные   -  person Paweł Fus    schedule 29.08.2014
comment
Спасибо за комментарий Пол, но он не соответствует варианту использования. Я попытался объяснить, обновив исходный пост. Пожалуйста, не стесняйтесь указывать, что мне не хватает.   -  person Nexeh    schedule 29.08.2014
comment
Я не уверен, где проблема. Хочешь турники? Измените тип серии на «bar», см.: jsfiddle.net/zbLqg33w   -  person Paweł Fus    schedule 29.08.2014
comment
Нет проблем с баром и столбцом. Проблема в том, что Джанет (приус) уложена поверх Джейн (Королла). Мне нужно, чтобы Джейн и Джанет были отдельными стопками и были помечены соответствующим образом. Тогда Джанет (Приус) и Джейн (Королла) должны быть отдельными стопками, показывающими количество счастливых несчастных. Легенда также должна включать и выключать Happy и Unhappy. Хочешь, я нарисую это? id обновите свою скрипку, но, очевидно, это проблема, которую я пытаюсь решить. я не думаю, что это возможно сделать   -  person Nexeh    schedule 29.08.2014
comment
Хорошо, создайте изображение/макет, чтобы было понятно :)   -  person Paweł Fus    schedule 29.08.2014
comment
Добавлен плункер, который показывает диаграмму выборочных данных, явно не сгруппированных. Работа с измененным/макетным изображением   -  person Nexeh    schedule 29.08.2014
comment
У меня недостаточно представителей, чтобы опубликовать издевательское изображение   -  person Nexeh    schedule 29.08.2014
comment
Я до сих пор не уверен, в чем проблема: plnkr.co/edit/cE9bPuE7YHPphfFHadOD?p=preview :) Если проблема с легендой (чтобы были только счастливые/недовольные) используйте опцию linkedTo.   -  person Paweł Fus    schedule 29.08.2014
comment
Да, вам нужно увидеть изображение, эта ссылка работает для вас? plus.google.com/u/0/photos/ альбомы/ Я заблокирован от обмена изображениями, но я думаю, что это сработало.   -  person Nexeh    schedule 29.08.2014
comment
резервная ссылка: docs.google.com/file/d/0Bx5B9-SpE6hSbW5ZTllYSUJKdTg/ редактировать   -  person Nexeh    schedule 29.08.2014
comment
У меня нет прав доступа к этому альбому.   -  person Paweł Fus    schedule 29.08.2014
comment
Хорошо, теперь я вижу, спасибо! Теперь просто используйте yAxis.stackingLabels, чтобы показать имена этих меток. По имени стека используйте стек: «Гражданский» для серии, я думаю, это должно помочь.   -  person Paweł Fus    schedule 29.08.2014
comment
Обновить плунжер?   -  person Nexeh    schedule 29.08.2014
comment
Павел Фус: Надеюсь, я тебя не потерял! Не могли бы вы сделать для меня плункер, показывающий ваше решение. Добавьте его в ответ, если хотите, чтобы я мог проголосовать за него, видя, как вы звучите так уверенно :)   -  person Nexeh    schedule 29.08.2014
comment
Сделаю в понедельник, когда будет больше времени :)   -  person Paweł Fus    schedule 30.08.2014

Ответы (3)


arrow_upward
3
arrow_downward

Пример: 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, я использовал jsFiddle. Кроме того, похоже, что Highcharts-ng не поддерживает stackLabels.formatter: http://plnkr.co/edit/7bjXpBXppv1UXf0YzGMZ?p=preview

person Paweł Fus    schedule 01.09.2014
comment
Спасибо Павел. Это много, чтобы выполнить то, что должно быть намного проще. Ты согласен? Как вы думаете, это то, что должно быть требованием к highcharges? Мне кажется, что я мог бы указать Группировку/Кластер/Категорию/Имя по вашему выбору для серии в стандартной сложенной полосе/столбце, и конфигурация была бы намного проще. - person Nexeh; 03.09.2014
comment
Конечно, вы всегда можете придумать идею для этой функции здесь. - person Paweł Fus; 03.09.2014

arrow_upward
0
arrow_downward

Просто внесите указанные ниже изменения в 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'
    }
}
person Kifayat Ullah    schedule 09.11.2018

arrow_upward
-1
arrow_downward

Я столкнулся с похожей проблемой, и вот что я сделал, чтобы решить ее.

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

По сути, я вытащил http://blacklabel.github.io/grouped_categories/grouped-categories.js и настроил оси series, x и y в соответствии с форматом, который использует этот плагин highchart.

person Alan Dong    schedule 04.09.2018