使用c3js更改条形图中单个条形的颜色

Question

如何更改条形图中单个条形的颜色。

    var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50]

        ],
        type: 'bar',
        colors: {
            data1: '#ff0000'
        },
        color: function (color, d) {

            return d.id && d.id === 'data1' ? d3.rgb(color).darker(d.value / 120) : color;
        }
    }
});

在这里，所有值大于 45 的条形都应为绿色，低于 45 的条形应为红色。

Answer 1

把data.colors.data1做成一个函数，像这样

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50]

        ],
        type: 'bar',
        colors: {
            data1: function(d) {
                return (d.value >= 45) ? '#00ff00': '#ff0000';
            }
        }
    },
    legend: {
       show: false
    },
    // take care of color in tooltip
    tooltip: {
        contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
            color = function() {
                return (d[0].value >= 45) ? '#00ff00' : '#ff0000';
            };
            return chart.internal.getTooltipContent.call(this, d, defaultTitleFormat, defaultValueFormat, color)
        }
    }
});

顺便说一下，我假设 45 是绿色的。

Fiddle - http://jsfiddle.net/vc1Lq1um/

Answer 2

如果这对某人有帮助，Stefka Todorov 的 codepen 展示了如何根据 'category' 更改颜色。对于尝试更改一个 或多个条 的颜色的任何人都有帮助，并且比使用布尔值更简单。

（分享这个是因为我来这里是为了寻找如何更改 C3 条的颜色，并且无法使用之前建议的方法更改多个条的颜色。）

 var chart = c3.generate({
            bindto: '#uv-div',
            size: {
                height: 150
            },
            bar: {
                width: 40
            },
            padding: {
                left: 60
            },
            color: {
                pattern: ['#FABF62', '#ACB6DD']
            },
            data: {
                x: 'x',
                columns:
                    [
                  ['x', 'Category1', 'Category2'],
                  ['value', 300, 400]
                  ],

                type: 'bar',

                color: function(inColor, data) {
                    var colors = ['#FABF62', '#ACB6DD'];
                    if(data.index !== undefined) {
                        return colors[data.index];
                    }

                    return inColor;
                }
            },
            axis: {
                rotated: true,
                x: {
                    type: 'category'
                }
            },
            tooltip: {
                grouped: false
            },
            legend: {
                show: false
            }
        });

使用c3js更改条形图中单个条形的颜色

change colour of individual bar in bar graph using c3js

jquery

c3.js