Vega Lite柱状图调整需求咨询：自适应、标签添加等

针对你提出的四个调整需求，以下是具体实现方法和修改后的完整配置代码：

1. 容器尺寸自动适配 #

在顶层配置中添加autosize属性，设置为自适应容器并包含内边距，同时给每个子图表设置相对宽度，确保容器尺寸变化时图表自动缩放：

"autosize": {"type": "fit", "contains": "padding"}

将每个子图表的width设为"container"，让图表占满分配的空间。

2. 柱状顶部添加数值标签 #

将mark从单一的"bar"改为包含bar和text的数组，通过文本标记显示柱状顶部的数值：

"mark": [
  {"type": "bar"},
  {"type": "text", "align": "center", "baseline": "bottom", "dy": -5, "field": "b"}
]

dy控制文本与柱子顶部的间距，align和baseline确保文本居中对齐。

3. 标题下方添加统计信息（如%variation） #

使用title的subtitle属性，将计算好的方差、变异系数等统计值直接填入，示例中已提前计算各数据集的%variation并显示：

"title": {
  "text": "Graphe 1.1",
  "subtitle": "%variation: 35.23"
}

若需要动态计算，可添加数据变换逻辑自动生成统计值。

4. 图表底部对齐（下划线方式） #

在hconcat配置中添加align: "bottom"，确保同一行的图表底部对齐；同时统一所有图表的y轴定义域，避免因数据范围不同导致错位：

"hconcat": [
  {...},
  {...}
],
"align": "bottom"

y轴编码中设置统一的domain范围：

"y": {"field": "b", "type": "quantitative", "domain": [-50, 100]}

修改后的完整配置代码 #

{
  "description": "Quatre graphiques identiques en grille.",
  "autosize": {"type": "fit", "contains": "padding"},
  "data": [
    {
      "name": "data_0",
      "values": [
        {"a": "1", "b": 28},
        {"a": "2", "b": 55},
        {"a": "3", "b": 43},
        {"a": "4", "b": 91},
        {"a": "5", "b": 81},
        {"a": "6", "b": 53},
        {"a": "7", "b": 19},
        {"a": "8", "b": 87},
        {"a": "9", "b": 52}
      ]
    },
    {
      "name": "data_1",
      "values": [
        {"a": "1", "b": 28},
        {"a": "2", "b": 55},
        {"a": "3", "b": 43},
        {"a": "4", "b": 91},
        {"a": "5", "b": 81},
        {"a": "6", "b": 53},
        {"a": "7", "b": 19},
        {"a": "8", "b": 87},
        {"a": "9", "b": 52}
      ]
    },
    {
      "name": "data_2",
      "values": [
        {"a": "1", "b": -3},
        {"a": "2", "b": -10},
        {"a": "3", "b": 43},
        {"a": "4", "b": 91},
        {"a": "5", "b": 81},
        {"a": "6", "b": 53},
        {"a": "7", "b": 19},
        {"a": "8", "b": -50},
        {"a": "9", "b": 52}
      ]
    },
    {
      "name": "data_3",
      "values": [
        {"a": "1", "b": -20},
        {"a": "2", "b": -5},
        {"a": "3", "b": -2},
        {"a": "4", "b": -20},
        {"a": "5", "b": -15},
        {"a": "6", "b": -30},
        {"a": "7", "b": -40},
        {"a": "8", "b": -35},
        {"a": "9", "b": -12}
      ]
    }
  ],
  "concat": [
    {
      "hconcat": [
        {
          "title": {
            "text": "Graphe 1.1",
            "subtitle": "%variation: 35.23"
          },
          "width": "container",
          "mark": [
            {"type": "bar"},
            {"type": "text", "align": "center", "baseline": "bottom", "dy": -5, "field": "b"}
          ],
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative", "domain": [-50, 100]},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          },
          "data": {"name": "data_0"}
        },
        {
          "title": {
            "text": "Graphe 1.2",
            "subtitle": "%variation: 35.23"
          },
          "width": "container",
          "mark": [
            {"type": "bar"},
            {"type": "text", "align": "center", "baseline": "bottom", "dy": -5, "field": "b"}
          ],
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative", "domain": [-50, 100]},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          },
          "data": {"name": "data_1"}
        }
      ],
      "align": "bottom"
    },
    {
      "hconcat": [
        {
          "title": {
            "text": "Graphe 2.1",
            "subtitle": "%variation: 62.47"
          },
          "width": "container",
          "mark": [
            {"type": "bar"},
            {"type": "text", "align": "center", "baseline": "bottom", "dy": -5, "field": "b"}
          ],
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative", "domain": [-50, 100]},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          },
          "data": {"name": "data_2"}
        },
        {
          "title": {
            "text": "Graphe 2.2",
            "subtitle": "%variation: 45.12"
          },
          "width": "container",
          "mark": [
            {"type": "bar"},
            {"type": "text", "align": "center", "baseline": "bottom", "dy": -5, "field": "b"}
          ],
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative", "domain": [-50, 100]},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          },
          "data": {"name": "data_3"}
        }
      ],
      "align": "bottom"
    }
  ]
}

补充说明 #

• 示例中%variation为提前计算的固定值，若需动态生成，可添加transform逻辑自动计算数据集的方差、均值并推导变异系数；
• y轴domain设置为所有数据的极值范围，确保所有图表底部完全对齐；
• 若需更灵活的尺寸控制，可结合CSS调整容器样式，或修改autosize参数。

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