vega-lite - 使用 Vega Lite 显示已经聚合的数据

Question

我正在尝试显示随时间推移的总和堆积条形图。数据看起来像这样：

[
  {
    "date": 12345,
    "sumA": 100,
    "sumB": 150
  },
  ...
]

我正在将 x 轴编码为“日期”字段。我需要将日期为 12345 的条堆叠在一起，其中一部分为 100 高，另一部分以另一种颜色显示，为 150 高。

Vega Lite 似乎期待原始数据，但这太慢了。我在服务器端进行此聚合以节省时间。我可以像上面的例子那样用勺子喂 Vega Lite 的聚合体吗？

标签： vega-lite

Answer 1

您可以使用折叠变换将两列折叠为一列，然后通道编码处理其余部分。例如（维加编辑器）：

{
  "data": {
    "values": [
      {"date": 1, "sumA": 100, "sumB": 150},
      {"date": 2, "sumA": 200, "sumB": 50},
      {"date": 3, "sumA": 80,  "sumB": 120},
      {"date": 4, "sumA": 120, "sumB": 30},
      {"date": 5, "sumA": 150, "sumB": 110}
    ]
  },
  "transform": [
    {"fold": ["sumA", "sumB"], "as": ["column", "value"]}
  ],
  "mark": {"type": "bar"},
  "encoding": {
    "x": {"type": "ordinal", "field": "date"},
    "y": {"type": "quantitative", "field": "value"},
    "color": {"type": "nominal", "field": "column"}
  }
}