c3.js时间序列图表,y轴百分比

时间:2016-07-28 14:30:27

标签: d3.js c3.js

我想格式化y轴以显示百分比。如果我不改变y轴格式,它会完美地显示值,但如果我添加y轴修改器线,则值将显示在y轴上。

这是代码:https://jsfiddle.net/3pssrmjm/

这是y轴修饰符代码:

  axis:{
        y: {
            tick:{
                format: d3.format('%')
            }
        }

    }

1 个答案:

答案 0 :(得分:3)

小变化。你有2个独立的轴对象,第二个是覆盖第一个。

chart = c3.generate({
    data: {
        x: 'time',
        xFormat: '%Y-%m-%d',
        json: [{
            "time": "2016-07-27",
            "Fehérje": 0.69,
            "Szénhidrát": 1.22,
            "Na": 2.47,
            "Ca": 0.32,
            "Ka": 0.3,
            "Zsír": 1.46,
            "P": 0.66
        }, {
            "time": "2016-07-16",
            "Fehérje": 0.06,
            "Szénhidrát": 0.12,
            "Na": 1,
            "Ca": 0.05,
            "Ka": 0.01,
            "Zsír": 0.02,
            "P": 0.13
        }, {
            "time": "2016-07-02",
            "Fehérje": 0.44,
            "Szénhidrát": 0.32,
            "Na": 2.12,
            "Ca": 0.47,
            "Ka": 0.7,
            "Zsír": 0.68,
            "P": 0.39
        }],
        keys: {
            x: 'time',
            value: ['Szénhidrát', 'Zsír', 'Na', 'Ca', 'K', 'P']
        }
    },
    axis: {
        x: {
            type: "timeseries",
            tick: {
                format: '%m-%d'
            }
        },
        y: {
            tick:{
                format: d3.format('%')
            }
        }
    },

    line: {
        connectNull: true
    }
});

小提琴:https://jsfiddle.net/f47r3fxm/