jquery - 使用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/