如何设置Vega Lite瀑布图Y轴最小值不从0开始？

你的问题出在没有在正确位置设置Y轴比例尺的zero: false。瀑布图通过y和y2字段定义条形上下边界，需要确保所有涉及Y轴的编码共享同一个非零起始比例尺，单独在某个图层设置或仅添加stack: none无法解决问题。

正确配置方法 #

在图表根级别encoding中定义Y轴比例尺，让所有图层的y、y2字段统一使用这个非零起始的比例尺，具体修改如下：

1. 在根encoding中添加y配置，设置scale.zero: false并定义Y轴标题；
2. 移除各图层中重复的Y轴标题定义，避免配置冲突。

修改后的完整配置：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"label": "Begin", "amount": 4000},
      {"label": "Sedan", "amount": 2},
      {"label": "SUV", "amount": -500},
      {"label": "Hatchback", "amount": -1200},
      {"label": "MPV", "amount": -1},
      {"label": "CrossOver", "amount": 500},
      {"label": "End", "amount": 0}
    ]
  },
  "width": 500,
  "height":500,
  "transform": [
    {"window": [{"op": "sum", "field": "amount", "as": "sum"}]},
    {"window": [{"op": "lead", "field": "label", "as": "lead"}]},
    {
      "calculate": "datum.lead === null ? datum.label : datum.lead",
      "as": "lead"
    },
    {
      "calculate": "datum.label === 'End' ? 0 : datum.sum - datum.amount",
      "as": "previous_sum"
    },
    {
      "calculate": "datum.label === 'End' ? datum.sum : datum.amount",
      "as": "amount"
    },
    {
      "calculate": "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount",
      "as": "text_amount"
    },
    {"calculate": "(datum.sum + datum.previous_sum) / 2", "as": "center"},
    {
      "calculate": "datum.sum < datum.previous_sum ? datum.sum : ''",
      "as": "sum_dec"
    },
    {
      "calculate": "datum.sum > datum.previous_sum ? datum.sum : ''",
      "as": "sum_inc"
    }
  ],
  "encoding": {
    "x": {
      "field": "label",
      "type": "ordinal",
      "sort": null,
      "axis": {"labelAngle": 0, "title": "Segment"}
    },
    "y": {
      "type": "quantitative",
      "title": "Average Sale",
      "scale": {"zero": false}
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "size": 45},
      "encoding": {
        "y": {"field": "previous_sum"},
        "y2": {"field": "sum"},
        "color": {
          "condition": [
            {
              "test": "datum.label === 'Begin' || datum.label === 'End'",
              "value": "#2E8BC0"
            },
            {"test": "datum.sum < datum.previous_sum", "value": "#93c4aa"}
          ],
          "value": "#f78a64"
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "#404040",
        "opacity": 1,
        "strokeWidth": 2,
        "xOffset": -22.5,
        "x2Offset": 22.5
      },
      "encoding": {
        "x2": {"field": "lead"},
        "y": {"field": "sum"}
      }
    },
    {
      "mark": {"type": "text", "fontWeight": "bold", "baseline": "middle"},
      "encoding": {
        "y": {"field": "center"},
        "text": {"field": "text_amount", "type": "nominal"},
        "color": {
          "condition": [
            {
              "test": "datum.label === 'Begin' || datum.label === 'End'",
              "value": "#FFFFFF"
            }
          ],
          "value": "white"
        }
      }
    }
  ],
  "config": {"text": {"fontWeight": "bold", "color": "#404040"}}
}

关键修改说明 #

• 根encoding中的y配置定义全局Y轴比例尺，scale.zero: false让Y轴自动根据数据的最小、最大值调整范围，不再强制从0开始；
• 各图层的y、y2字段自动继承根级比例尺设置，确保所有元素Y轴坐标统一；
• 移除图层中重复的Y轴标题，避免配置冲突。

修改后，Sedan和MPV的小数值条形即可正常显示。

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