C3.js柱状图：将X轴自动生成标签替换为自定义文本

嘿，这事儿好办！要把X轴默认的0、1换成你要的P1、P2，只需要在C3的配置里新增axis配置项，专门给X轴指定分类标签就行。

你可以直接修改你的代码，加上下面这段axis配置：

var chart = c3.generate({
    bindto: '#bar',
    data: {
        columns: [
            ['A1', 30, 200],
            ['A2', 130, 100],
            ['A3', 12, 59],
            ['A4', 42, 25],
            ['A5', 76, 84],
            ['A6', 83, 14],
            ['A7', 54, 87],
            ['A8', 110, 40],
            ['A9', 34, 48]
        ],
        type: 'bar'
    },
    // 新增的X轴配置
    axis: {
        x: {
            categories: ['P1', 'P2'], // 这里就是你要的自定义标签
            tick: {
                centered: true, // 可选：让标签居中对齐柱子
                multiline: false // 可选：禁止标签换行
            }
        }
    }
});

关键说明： #

• axis.x.categories：这个数组里的元素会按顺序对应X轴的每个数据点，第一个元素对应原来的0，第二个对应原来的1，完美替换成你要的P1和P2。
• 如果需要调整标签的对齐方式或者显示样式，可以通过axis.x.tick里的参数进一步设置，比如上面的centered能让标签和柱子中心对齐，看起来更美观。

这样修改之后，你的柱状图X轴就会显示P1和P2，而不是默认的数字标签啦！

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