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

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

    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的条应该是红色。

只需将

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是绿色的

---

---

小提琴-

如果这对某人有帮助，Stefka Todorov的这篇文章展示了如何根据“类别”改变颜色。对任何试图更改一个或多个条的颜色的人都很有用，而且比使用布尔值更简单

（分享此信息是因为我来这里是想了解如何更改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
            }
        });