c3.js 带有百分比 y 轴的时间序列图

Question

我想格式化 y 轴以显示百分比。如果我不更改 y 轴格式，它会完美显示值，但如果我添加 y 轴修饰符线，值将出现在 y 轴上。

这是y轴修饰符代码：

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

    }

Answer 1

小改动。您有 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
    }
});

还有一个fiddle：https://jsfiddle.net/f47r3fxm/

c3.js 带有百分比 y 轴的时间序列图

c3.js timeseries graph with percentage y axis

d3.js

c3.js