如何将Vega Lite分组柱状图的分组名称移动到图表底部

你只需要调整编码和轴配置即可实现需求，具体修改方案如下：

方法一：使用嵌套X轴（推荐，显示效果和普通X轴完全一致） #

将Currency字段调整为第一层X轴编码，同货币下区分不同柱子的字段作为xOffset编码即可，配置示例：

"encoding": {
  "x": {
    "field": "Currency",
    "type": "nominal",
    "axis": {
      "labelAngle": 0,
      "title": null
    }
  },
  "xOffset": {
    "field": "你的分组字段名", // 替换为你当前用来区分同货币下不同柱子的字段，如业务类型、统计维度等
    "type": "nominal"
  },
  // y、color等其余编码保持原有配置不变即可
}

如果你原本的配置就是将Currency放在xOffset上，直接将两个字段的编码位置调换即可生效。

方法二：直接开启xOffset的底部轴 #

如果不想调整原有字段的编码位置，也可以直接给xOffset对应的Currency字段添加底部轴配置：

"encoding": {
  // 其余编码保持原有配置不变
  "xOffset": {
    "field": "Currency",
    "type": "nominal",
    "axis": {
      "orient": "bottom",
      "labelAngle": 0,
      "title": null,
      "domain": false, // 可选配置：隐藏轴线，避免和下方原有X轴重复
      "ticks": false // 可选配置：隐藏刻度线
    }
  }
}

常见问题调整 #

• 若出现标签重叠，可在对应axis配置中添加"labelAngle": -45调整标签倾斜角度，或添加"labelPadding": 8调整标签和图表的间距。
• 若不需要显示X轴标题，可保留配置中的"title": null，需要显示则删除该行即可。

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