c3条形图标签颜色

Question

我使用以下 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
    },
    });

它显示了以下输出响应。

所以现在我可以看到我想看到的结果了。但是栏中的标签颜色不正确。我需要将条形颜色设置为黄色、蓝色等，而需要将条形值标签保持为黑色。

这方面的任何帮助真的很有帮助！谢谢

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

Answer 1

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

希望这能解决您的问题。

c3条形图标签颜色

c3 bar chart label color

html

jquery

charts

c3.js