Question

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

是否可以将Y轴标签分类并显示为＆＃34;初学者＆＃34;，＆＃34;中级＆＃34;，＆＃34;高级＆＃34;和＆＃34;掌握＆＃34;其中值分别在0-25,25-50,50-75,75-100之间？

Answer 1

HTML

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
            }
        }
    }
});

JS

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

CSS

<request>
    <url>Abcd</url>
    <base-url>XXXXX/</base-url>
    <args src="url">
        <arg name="languageCode">NL</arg>
        <arg name="version">1</arg>
        <arg name="offerId">10</arg>
        <arg name="rewardId">1234</arg>
    </args>
</request>

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

在C3图表中更改Y轴标签

1 个答案: