如何在C3.js柱状图的每个柱子下方添加分类名称？

嘿，这事儿不难，咱们直接改配置就行！你现在的代码把x轴隐藏了，而且没设置分类标签，只要调整axis.x的配置，再补充分类名称就能实现需求。

修改后的完整代码 #

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 120],
            ['data2', 130],
            ['data3', 130]
        ],
        type: 'bar'
    },
    color: {
        pattern: ['red', 'grey','orange']
    },
    bar: {
        space: 0.25
    },
    axis: {
        x: {
            show: true, // 开启x轴显示，让标签能展示出来
            type: 'category', // 指定x轴为分类轴类型
            categories: ['分类A', '分类B', '分类C'] // 自定义分类名称，顺序要和data里的系列一一对应
        },
        y: {
            show: false
        }
    },
    legend:{
        show: false
    }
});

关键修改点说明 #

• 开启x轴显示：把axis.x.show从false改为true，这是分类标签能显示的前提
• 设置分类轴类型：添加axis.x.type: 'category'，告诉C3.js这是分类轴而非数值轴
• 自定义分类名称：通过axis.x.categories数组定义每个柱子下方的标签，数组元素顺序必须和data.columns里的系列顺序完全匹配（比如第一个元素对应data1的柱子，第二个对应data2，以此类推）

这样调整后，每个柱子下方就会显示你设置的分类名称啦～

内容的提问来源于stack exchange，提问作者yavg