c3图表在Y轴上显示0值

时间:2019-02-15 05:04:50

标签: jquery html css charts c3.js

我的价值观如下

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
},

我得到的响应如下,请参阅屏幕截图以获取信息

enter image description here

我需要Y轴仅显示3,而不应显示0,它应该是隐藏的。

1 个答案:

答案 0 :(得分: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/