上一篇: jquery – 即使多次选择单选按钮... 下一篇:jquery – 如何测量AJAX请求的加...

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

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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',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,color)
        }
    }
});