Vega-Lite时间表式图表X轴标签重叠问题及换行需求

要实现X轴标签自动换行以避免重叠，可通过以下两种方式处理：

1. 手动拆分文本插入换行符 #

在X轴配置中，使用axis.labelExpr按规则拆分标签文本，插入换行符\n。比如按空格拆分实现多行显示：

{
  "mark": "rect",
  "encoding": {
    "x": {
      "field": "your-x-field",
      "type": "nominal",
      "axis": {
        "labelExpr": "split(datum.label, ' ').join('\\n')",
        "labelAlign": "center",
        "labelBaseline": "top"
      }
    }
    // 其他编码配置
  }
}

如果需要按固定长度拆分，可使用字符串截取函数：

"labelExpr": "substring(datum.label, 0, 10) + '\\n' + substring(datum.label, 10)"

2. 自动按宽度限制换行 #

通过axis.labelLimit设置标签最大宽度，超出后自动换行：

"x": {
  "field": "your-x-field",
  "type": "nominal",
  "axis": {
    "labelLimit": 100, // 单位：像素
    "labelAlign": "center",
    "labelPadding": 5
  }
}

适配时间表图表的完整示例 #

针对你的需求，修改X轴配置后的核心代码片段：

"encoding": {
  "x": {
    "field": "teacher",
    "type": "nominal",
    "axis": {
      "labelLimit": 80,
      "labelAlign": "center",
      "labelPadding": 5
    }
  },
  "y": {
    "field": "time",
    "type": "ordinal"
  },
  "color": {
    "field": "subject",
    "type": "nominal"
  }
}

设置后，X轴标签会在超出指定宽度时自动换行，避免重叠，同时保持居中对齐，匹配你给出的示例格式。

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