代码之家  ›  专栏  ›  技术社区  ›  MTT

在C3中设置Y轴间距

  •  0
  • MTT  · 技术社区  · 6 年前

    我有下面的图表,我只想使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 回复  |  直到 6 年前
        1
  •  0
  •   mgraham    6 年前

    设置y tick格式化函数以返回非整数上的空格

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