Deneb（Vega-Lite）堆叠条形图数据缺失问题排查

我在使用Deneb（基于Vega-Lite）创建堆叠条形图时，遇到数据无法正常显示的问题。已通过transform中的fold转换将Booked与Not Booked两个度量字段合并，推测可能是数据中的null值引发了该问题，但这只是初步猜测。

Vega-Lite代码 #

{
  "data": {
    "values":[
      {"Scheduled Event Class": "Inspection", "Booked": 0, "Not Booked": 1}, 
      {"Scheduled Event Class": "Loler Test", "Booked": 0, "Not Booked": 8}, 
      {"Scheduled Event Class": "MOT", "Booked": 0, "Not Booked": 2},
      {"Scheduled Event Class": "Pre-MOT Check", "Booked": 1, "Not Booked": 0},
      {"Scheduled Event Class": "Service", "Booked": 1, "Not Booked": 4}  
    ]
  },
  "transform": [
    {
      "fold": ["Booked", "Not Booked"],
      "as": ["Booking Status", "value"]
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusEnd": 10
      },
      "encoding": {
        "x": {
          "field": "Scheduled Event Class",
          "type": "nominal",
          "title": null,
          "sort": "-y",
          "axis": {
            "labelAngle": 0
          }
        },
        "y": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative",
          "title": null
        },
        "color": {
          "field": "Booking Status",
          "type": "nominal",
          "legend": {
            "labelAlign": "left",
            "orient": "top",
            "title": null
          },
          "scale": {
            "domain": ["Booked", "Not Booked"],
            "range": ["#BBD4FF", "#FAF26E"]
          }
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dx": 0,
        "dy": -5,
        "color": "white",
        "size": 8
      },
      "encoding": {
        "x": {
          "field": "Scheduled Event Class",
          "type": "nominal",
          "title": null,
          "sort": "-y"
        },
        "y": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative",
          "title": null
        },
        "text": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusEnd": 10,
        "color": {
          "x1": 1,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "rgba(0, 0, 0, 0.5)"
            },
            {
              "offset": 1,
              "color": "rgba(0, 0, 0, 0)"
            }
          ]
        }
      },
      "encoding": {
        "x": {
          "field": "Scheduled Event Class",
          "type": "nominal",
          "title": null,
          "sort": "-y",
          "axis": {
            "labelAngle": 0
          }
        },
        "y": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative",
          "title": null
        },
        "tooltip": [
          {"field": "Booking Status"},
          {"field": "value", "aggregate": "sum", "type": "quantitative"}
        ]
      }
    }
  ]
}

问题现象 #

图表中存在数值的数据并未正常显示，部分类别对应的条形图完全缺失或未正确渲染。

原始CSV数据 #

Scheduled Event Class,Booked,Not Booked
Inspection,null,1
Loler Test,null,8
MOT,null,2
Pre-MOT Check,1,null
Service,1,4

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