如何在C3.js中隐藏带有null值的柱状图条形？

我用列数据构建了一个C3柱状图，其中data1和data3存在null值。目前C3会按5组形式展示柱状图，为null值生成单独的空条形，我希望隐藏这些带有null值的柱状图条形。

原始代码 #

var chart = c3.generate({
    "data": {
        "x" : 'x',
        "line":{"connect_null": true},
        "columns": [
            ['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
            ['data1',null ,30, 200, 100, 400, 150, 250],
            ['data2',null ,130, 100, 140, 200, 150, 50],
            ['data3',null ,130, null, 200, 300, -200, 100],
            ['data4',null ,20, -90, 200, 130, -20, 90],
            ['data5',-90, 20, -90, 200, 130, -20, 90]
        ],
        "type": 'bar'
    },
    "axis": {
        "x": {
            "type": 'category'
        }
    },
    "bar": {
        "width": {
            "ratio": 0.7
        },
        "space":0.05
    }
});

解决方法 #

方法1：使用CSS直接隐藏空条形

C3生成的每个条形元素都会带有data-value属性，值为null的条形该属性值为"null"，直接通过CSS选择器隐藏即可：

.c3-bar[data-value="null"] {
    display: none !important;
}

方法2：通过onrendered回调动态隐藏

在图表渲染完成后，遍历所有条形元素，判断其对应的值是否为null，然后隐藏：

var chart = c3.generate({
    "data": {
        "x" : 'x',
        "line":{"connect_null": true},
        "columns": [
            ['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
            ['data1',null ,30, 200, 100, 400, 150, 250],
            ['data2',null ,130, 100, 140, 200, 150, 50],
            ['data3',null ,130, null, 200, 300, -200, 100],
            ['data4',null ,20, -90, 200, 130, -20, 90],
            ['data5',-90, 20, -90, 200, 130, -20, 90]
        ],
        "type": 'bar'
    },
    "axis": {
        "x": {
            "type": 'category'
        }
    },
    "bar": {
        "width": {
            "ratio": 0.7
        },
        "space":0.05
    },
    "onrendered": function() {
        d3.selectAll('.c3-bar').each(function() {
            const bar = d3.select(this);
            if (bar.attr('data-value') === 'null') {
                bar.style('display', 'none');
            }
        });
    }
});

说明 #

两种方法都可以实现隐藏null值条形的效果，其中CSS方法更简洁，无需修改JS代码；如果需要更灵活的逻辑（比如根据特定条件隐藏），可以选择onrendered回调的方式。

内容的提问来源于stack exchange，提问作者Yash Koolwal