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/