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'
    }
});

⚠️ 注意事项：

图想浪漫

AI驱动的智能图片编辑解压娱乐站

下载

• 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 根下。定位配置层级是解决此类“属性不生效”问题的关键。