C3.js 中 x 轴刻度标签强制单行显示的正确配置方法

在 c3.js 中，`tick.multiline: false` 用于禁用 x 轴分类标签的自动换行，但该配置必须嵌套在 `axis.x` 内部才生效，若置于 `axis` 顶层则被忽略。

C3.js 的配置项具有严格的层级结构，axis.tick.multiline 并非有效路径——正确的配置位置是 axis.x.tick.multiline。在原始代码中，tick: { multiline: false } 被错误地写在了 axis 对象下（与 x 同级），导致 C3.js 完全忽略该设置，x 轴长文本仍会自动折行为多行。

✅ 正确写法如下（关键修改已加注释）：

var graph = c3.generate({     bindto: "#chart",     data: {         columns: [             ["name1", "5.00", "3.00"],             ["name2", "3", "2"]         ],         type: 'bar',         colors: {             "name1": "#00ff00",             "name2": "#0000ff"         }     },     bar: {         width: 10     },     axis: {         x: {             type: 'category',             categories: [                 "test looooooong string no multiline",                 "string 2"             ],             tick: {  // ✅ 必须在此处定义 tick 配置                 multiline: false  // 禁用自动换行，强制单行显示             }         },         rotated: true  // 注意：rotated 仍属于 axis 层级，与 x 同级     },     transition: {         duration: 1000     },     padding: {         bottom: 20     },     title: {         text: 'titolo'     } });

⚠️ 注意事项：

• rotated: true 控制坐标轴旋转（使柱状图横排），它属于 axis 级配置，不可放入 axis.x 内；
• tick.multiline: false 仅对 category 类型的 x 轴生效，对数值型（indexed）或时间型轴无效；
• 若标签仍溢出容器，建议配合 css 控制文本截断或缩放：

  #chart .c3-axis-x .tick text {     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;     max-width: 120px;     display: inline-block; }

• C3.js v0.4.x 基于 D3 v3，不支持现代 CSS text-wrap: nowrap 的直接映射，因此 JS 配置 + CSS 辅助是可靠组合方案。

总结：C3.js 的配置对象是深度嵌套结构，tick 相关选项必须依附于具体坐标轴（如 axis.x 或 axis.y），而非笼统置于 axis 根下。定位配置层级是解决此类“属性不生效”问题的关键。