Цвет метки линейчатой ​​диаграммы c3 - PullRequest
Новая
       24

Цвет метки линейчатой ​​диаграммы c3

0 голосов
/ 30 января 2019

Я строю диаграмму, используя следующий код c3 

            c3.generate({
        bindto: '#total_revenue',
            data: {
            x : 'x',
            columns: [
                ['Total Revenue',1.7,1.7,2.0,2.1,0],
                ['x','Less than 10M', '10M - 20M','20M - 40M','40M - 100M','More than 100M'],
            ],
            type: 'bar',
            labels:{
                format:{
                    'Total Revenue':  function (v, id, i, j){
                        return (v);
                    }
                }
            },
            colors: {
                'Total Revenue': function(d) {
                    if(d.value > 3){
                        return '#0075BD';
                    } 
                    if(d.value > 2){
                        return '#B0D1F2';
                    } else {
                        return '#F7A71A';
                    }
                }
            },
        },          
        size: {
            height: 220,
        },
        axis: {
            rotated: true,
            x: {
                type: 'category',
                tick: {
                    rotate: 75,
                    multiline: false
                },
            },
            y: {
                min: 1,
                max: 4,
                tick: {
                    values: [1, 2, 3, 4]
                }
            },
        },
        legend: {
        show: false
    },
    });

, который показывает мне следующий выходной ответ.

enter image description here

ИтакЯ вижу, какой результат я хотел увидеть.Но цвет метки на панели неправильный.Мне нужно, чтобы цвет полос был желтым, синим и т. Д., В то время как необходимо сохранить метку значения бара черным.

Любая помощь в этом может действительно помочь!Спасибо

JS FIDDLE: https://jsfiddle.net/k5acudeg/4/

1 Ответ

0 голосов
/ 30 января 2019

C3.js не дает возможность добавлять цвета к метке через сам фреймворк c3.Вам нужно найти элемент HTML и стилизовать его. 

.c3-chart-texts text {
   fill: red !important;
}

В этом случае необходимо добавить !important.

https://jsfiddle.net/9rovy48L/

ОБНОВЛЕНИЕ:

Вы можете быть более точным и изменить цвет каждого ярлыка: 

.c3-chart-texts .c3-text-0 {
   fill: blue !important;
}

.c3-chart-texts .c3-text-1 {
   fill: red !important;
}

Надеюсь, это решит вашу проблему.

...