如何为Vega-Lite中的每个concat添加标题？

要给每个concat子模块添加顶部标题，直接在concat数组的每个子可视化配置中加入title字段即可，还可按需配置标题样式。

具体实现步骤 #

• 针对vconcat或hconcat数组中的每个子视图，添加title配置：
  • 基础用法：直接指定标题文本，如"title": "子模块标题"
  • 自定义样式：通过对象形式配置标题的位置、字体等，如：

    "title": {
      "text": "自定义样式标题",
      "anchor": "start", // 标题对齐方式，可选start/center/end
      "fontSize": 14,
      "fontWeight": "bold",
      "color": "#2c3e50"
    }
    

• 若需统一所有标题的样式，可在spec顶层的config中全局配置标题样式：

  "config": {
    "title": {
      "anchor": "start",
      "fontSize": 16,
      "fontFamily": "Arial"
    }
  }
  

修改后的示例片段 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "vconcat": [
    {
      "title": "第一组数据可视化",
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"}
      }
    },
    {
      "title": "第二组数据可视化",
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "value", "type": "quantitative"}
      }
    }
  ],
  "config": {
    "title": {
      "anchor": "start",
      "fontWeight": "bold"
    }
  }
}

这样修改后，每个concat子模块顶部就会显示对应的标题，匹配你期望的效果。

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