Vega Lite 多数据集组合绘制直方图条形图异常排查

这属于配置疏漏，并非Vega Lite本身的功能限制。
出现顺序依赖的数据加载异常，核心原因是你在两个子视图中分别为同一份数据源配置了不同的property提取参数：Vega Lite处理拼接视图（hconcat/vconcat）时，会对顶层同名数据源做自动复用合并，后解析的数据源property配置会直接覆盖先解析的配置，最终只会加载对应单个property路径下的嵌套数据，另一个子图拿不到目标数据，自然出现渲染错乱。

不要在两个子图中重复定义带不同property的数据源，改为在视图最顶层加载一次完整的API返回数据，两个子图分别通过数据转换提取自身需要的嵌套字段即可，具体操作：

• 在hconcat最外层定义唯一的顶层数据源，加载完整JSON内容，不要加property参数，给数据源命名方便子图引用
• 直方图子图通过source引用顶层数据源，用转换逻辑提取data.histogram数组下的记录作为绘图数据
• 填充情况条形图同样引用顶层数据源，用转换逻辑提取data.fill数组下的记录作为绘图数据

核心配置参考：

{
  "hconcat": [
    {
      "title": "数值分布直方图",
      "mark": "bar",
      "data": {
        "source": "full_api_data",
        "transform": [
          {"flatten": ["data.histogram"]},
          {"calculate": "datum['data.histogram'].bin_start", "as": "bin_start"},
          {"calculate": "datum['data.histogram'].bin_end", "as": "bin_end"},
          {"calculate": "datum['data.histogram'].count", "as": "count"}
        ]
      },
      "encoding": {
        // 原有直方图x/y轴配置保持不变
      }
    },
    {
      "title": "填充情况统计",
      "mark": "bar",
      "data": {
        "source": "full_api_data",
        "transform": [
          {"flatten": ["data.fill"]},
          {"calculate": "datum['data.fill'].level", "as": "level"},
          {"calculate": "datum['data.fill'].count", "as": "count"}
        ]
      },
      "encoding": {
        // 原有条形图x/y轴配置保持不变
      }
    }
  ],
  "data": {
    "name": "full_api_data",
    // 内联数据就用values字段放完整JSON，远程数据就替换为url字段
    "values": {
      "data": {
        "fill": [
          {"count": 30000, "level": "filled"},
          {"count": 50000, "level": "missing"}
        ],
        "histogram": [
          {"bin_end": 20, "bin_start": 0, "count": 1000},
          {"bin_end": 30, "bin_start": 20, "count": 20000}
        ]
      },
      "metadata": {}
    },
    "format": {"type": "json"}
  }
}

这种配置方式下两个子图的数据提取逻辑完全独立，不会出现配置覆盖问题，不需要修改API返回的固定数据结构，就能实现预期的并排组合效果。

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