在c3中设置y轴间距

时间:2018-06-03 13:41:10

标签: d3.js charts c3.js

我有下面的图表,我想只使y轴间距为整数(当要显示的数据很低时,我得到小数:0.1,0.2 ......)。有人可以帮忙吗?

var Presence = c3.generate({
        bindto: '#presence',
        data: {
            url: 'ranking.csv',
            x:'AC_YEAR',
            types: {
                Number_students: "bar",
                Ranking: 'spline'
            },
            axes:{
                Number_students: "y",
                Ranking: "y2"
            }
        },
        axis: {
            y: {
                label: {
                text:"Students",
                position: "outer-middle"
                },
                tick: {
                    outer: false}
            },
            y2: {
                inverted:true,
                show: true,
                label: {
                    text:"Ranking position",
                    position: "outer-middle"
                },
                tick: {
                    outer: false
                }
            },
            x: {
                label: {
                text:"Year",
                position: "outer-center"
                },
                tick: {outer: false}
            }
        },
        size: {
            height: 400,
            width: 800
        },    
});

csv文件如下所示:

AC_YEAR,Number_students,Ranking
2011,1,103
2012,2,30
2014,1,178
2015,1,188

但是csv随着时间的推移而变化,有时候学生人数是100.所以这就是为什么我不想修改y轴上的值,只有当学生人数较少时才避免浮动(1或2) )

提前致谢!

1 个答案:

答案 0 :(得分:0)

设置y刻度格式化功能以在非整数上返回空白

    y: {
        label: {
        text:"Students",
        position: "outer-middle"
        },
        tick: {
            format: function (d) { 
                return Math.abs(Math.round(d) - d) < 0.001 ? d : ""; 
            },
            outer: false
            }
    },