jquery - 更改 C3 图表中的 Y 轴标签

Question

是否可以更改或分类 C3 折线图中的 Y 轴标签。

是否可以将 Y 轴标签分类并显示为“初学者”、“中级”、“高级”和“精通”，其中值分别在 0-25、25-50、50-75、75-100 之间?

Answer 1

HTML

<div id="chart"></div>

JS

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-15', '2013-02-15', '2013-03-15', '2013-04-15', '2013-05-15', '2013-06-15'],
            ['Team Alpha', 30, 20, 10, 40, 15, 25],
            ['Team Beta', 30, 100, 14, 20, 15, 50]
        ],
        type: 'spline'
    },    
    tooltip: {
        format: {
            value: function (value, ratio, id) {
                if (value < 25)
                     return 'Beginner';
                else if (value < 50)
                     return 'Intermediate';
                else if (value < 75)
                     return 'Advanced';
                else 
                    return 'Mastery';
            }
        }
    },    
    axis: {
        x: {
            padding: {
                left: 0
            },
            type: 'timeseries',
            tick: {
                format: '%b'
            }
        },
        y: {
            min: 0,
            max: 100,
            padding: {
                bottom: 0,
                top: 0
            },
            tick: {
                format: function (d) {
                    switch (d) {
                        case 12.5:
                            return "Beginner"
                        case 37.5:
                            return "Intermediate"
                        case 62.5:
                            return "Advanced"
                        case 87.5:
                            return "Mastery"
                    }
                },
                values: [12.5, 37.5, 62.5, 87.5],
                width: 0
            }
        }
    }
});

CSS

.c3-axis-y .tick line {
   display: none;
}

小提琴 - http://jsfiddle.net/gqf03ea2/