C3.js 横轴标签单行显示失效问题的正确配置方法-js教程

c3.js 中 `axis.x.tick.multiline: false` 无法生效，是因为配置位置错误；必须将其嵌套在 `axis.x` 内部而非 `axis` 顶层，本文详解正确写法、原理及兼容性注意事项。

在使用 C3.js 创建横向柱状图（rotated: true）时，常需强制横轴分类标签（categories）以单行形式显示，避免自动换行截断长文本。官方文档虽注明 tick.multiline: false 可禁用多行渲染，但若该配置置于 axis 根级（如 axis: { tick: { multiline: false } }），C3.js 将完全忽略该设置——这是因 C3 的配置解析机制要求 tick 相关选项必须与具体坐标轴（x 或 y）深度绑定。

✅ 正确配置方式是将 tick.multiline: false 严格置于 axis.x 对象内部，与其他 x 轴属性（如 type、categories）同级：

axis: {
  x: {
    type: 'category',
    categories: [
      "test looooooong string no multiline",
      "string 2"
    ],
    tick: {
      multiline: false  // ✅ 必须在这里！
    }
  },
  rotated: true
}

⚠️ 注意事项：