Гистограмма C3JS с определенным заказом с цветом - PullRequest
Новая
       19

Гистограмма C3JS с определенным заказом с цветом

0 голосов
/ 15 апреля 2019

В настоящее время я работаю над диаграммой c3, чтобы нарисовать гистограмму стека.я могу заполнять динамические данные, основанные на событии щелчка, все работает нормально, но когда я смотрю на диаграмму, гистограмма, отображаемая в диаграммах, не позиционируется должным образом на основе моих входных данных enter image description here

Здесь я прилагаю мой образец кода: 

Rowvalue = [['1-10'].concat(processed_value_final0),
['11-50'].concat(processed_value_final1),
['51-200'].concat(processed_value_final2),
['201-500'].concat(processed_value_final3),
['501-1k'].concat(processed_value_final4)];
groupCol = ['1-10', '11-50', '51-200', '201-500', '501-1k'];  

var chart = c3.generate({
bindto: div_id,
    data: {
        columns:Rowvalue,    
        type: 'bar',
        order: 'asc',
        groups: [
            groupCol                                    
        ]
        },
        bar: {
            width: barwd
            } ,
        grid: {
            y: {
                show: true,
                lines: [{value:0}]
            }
            },
        axis: { 
            x: 
            {
                type: 'category',
                categories: keyValue
            },
            y:
            {
                min : 0,
                padding : {
                bottom : 0
                }                                    
            }
        },
    color: {
        pattern: ['#ED5565', '#23C6C8', '#F8AC59', '#1AB394', '#1C84C6', '#F8AC59', '#23C6C8', '#ED5565', '#F8AC59']
        },
    legend:
    {
    show: true,
    position:'right'
    },
    tooltip :
    {
    show:true
    }
   });

1 Ответ

0 голосов
/ 16 апреля 2019

Вам необходимо изменить значение в разделе order конфигурации, которое может быть либо i) 'asc', либо 'desc' - которые работают со значениями данных, т.е. сначала с самыми большими или самыми маленькими значениями, ii) | null для того же (но не см. Позже) упорядочения в качестве данных, или iii) массива ключей серии данных, или iv) функции, которая работает с ключами серии данных.

Здесь мы меняем порядок на массив - массив groupCol, но в обратном порядке: 

    order: groupCol.reverse(),

Это меняет порядок на обратный порядку, определенному в переменных groupCol и rowValue. Причина, по которой его необходимо изменить, состоит в том, что алгоритм рисования стека начинается снизу вверх, а ключ легенды перечисляет ключи серии данных сверху вниз. По этой же причине опция null не будет работать, полосы и условные обозначения будут меняться друг от друга в порядке.

...