c3js水平条形图能否旋转X轴文本？官方文档无相关示例

当然可以！虽然C3.js官方文档没有专门针对水平条形图的X轴文本旋转示例，但这个功能是完全支持的——只是需要注意rotated: true时轴的对应关系，配置方式和普通条形图类似，只是要对应到正确的轴配置项。

关键说明 #

当你设置rotated: true后，C3会交换轴的显示方向：

• 原本垂直条形图的X轴（类别轴）会变成水平条形图的Y轴（底部的类别轴）
• 原本垂直条形图的Y轴（数值轴）会变成水平条形图的X轴（左侧的数值轴）

所以如果你想旋转的是水平条形图底部的类别文本（也就是你习惯中普通条形图的X轴文本），需要配置axis.y.tick.rotate；如果是想旋转左侧的数值轴文本（现在的X轴），则配置axis.x.tick.rotate。

代码示例 #

下面是一个完整的水平条形图示例，同时演示旋转X轴（左侧数值轴）和Y轴（底部类别轴）的文本：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        type: 'bar',
        rotated: true // 启用水平条形图
    },
    axis: {
        x: {
            tick: {
                rotate: 45 // 旋转左侧X轴的数值文本
            }
        },
        y: {
            tick: {
                rotate: 30 // 旋转底部Y轴的类别文本（对应普通条形图的X轴）
            }
        }
    }
});

注意事项 #

• 旋转角度可以是任意整数，正负值分别对应顺时针/逆时针旋转
• 如果旋转后文本超出图表范围，可以通过axis.x.padding或axis.y.padding调整轴的内边距，避免文本被截断

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