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

【问题标题】：change colour of individual bar in bar graph using c3js使用 c3js 更改条形图中单个条形的颜色
【发布时间】：2015-09-14 04:14:40
【问题描述】：

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

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

【问题讨论】：

标签： jquery c3.js

【解决方案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 是绿色的。

小提琴 - http://jsfiddle.net/vc1Lq1um/

【讨论】：

线程可能太旧了，但这不会在弹出工具提示中显示正确的颜色。有没有办法在不通过c3js.org/reference.html#tooltip-contents重写整个工具提示的情况下解决这个问题？
更新了答案。干杯！

【解决方案2】：

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

（分享这个是因为我来这里是为了寻找如何更改 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
            }
        });

【讨论】：