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

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