c3 图表在 Y 轴上显示 0 值

Question

我的值如下

c3.generate({
bindto: '#percentage_of_companies',
data: {
    x: 'x',
    columns: [
        ['Average Percentage', 3, 0, 0,],
        ['x', 'Overall', 'Admin','Aerospace'],
    ],
    type: 'bar',
    labels: {
        format: {
            'Average Percentage': function(v, id, i, j) {
                return (v);
            }
        }
    },
    },
},
size: {
    height: 800,
},
axis: {
    rotated: true,
    x: {
        type: 'category',
        tick: {
            rotate: 75,
            multiline: false
        },
    },
    y: {
        max: 100,
        tick: {
            values: [20, 40, 60, 80, 100]
        }

    },
},
legend: {
    show: false
},

得到的响应如下，参考截图

我需要Y轴只显示3，0不应该显示，应该隐藏。

Answer 1

将此添加到您的配置中 -->

onrendered: function () {
    d3.select(this.config.bindto).selectAll(".c3-chart-text text").style("display", function (d) {
        if (d && d.value === 0) return "none";
        return null;
    })
}

见https://jsfiddle.net/y4pqmht7/

c3 图表在 Y 轴上显示 0 值

c3 chart showing 0 value in Y axis

html

css

jquery

charts

c3.js