Vega-lite 时间序列图表，以周期性方式覆盖当前、去年和平均值

Question

我有一个简单的时间序列，其中包含随时间变化的价格： [{t:"2023-01-31", price: 100}, ...] 。

使用vega-lite.js ，我可以轻松地将 plot 作为一行。

脚本在这里。

但是，我想用 3 行按月显示此类数据。

• 一行显示去年的数据。
• 一行显示去年
• 一个是过去 5 年的平均价格。

是这样的：

在某些情况下，这允许更紧凑和直观的阅读。 月份环绕，因此 x 轴始终具有相同的大小。 将当前情况与过去情况进行比较更容易，因为线条是重叠的。

我试过

• 使用transform创建额外的列，以区分这三个
• 使用{"timeUnit": "month"} , {"aggregate": "mean"}选项来重组我的轴......但没有成功。

go 以优雅的 Vega 方式对此的正确方法是什么？

Answer 1

给你 go。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 600,
  "encoding": {
    "x": {
      "field": "month",
      "axis": {"labelExpr": "monthAbbrevFormat(datum.value)", "labelAngle": 0}
    },
    "y": {"field": "price", "type": "quantitative"},
    "tooltip": [
      {"field": "t", "type": "temporal", "title": "t"},
      {"field": "p", "type": "quantitative", "title": "price"}
    ],
    "color": {
      "field": "null",
      "title": "series",
      "scale": {
        "domain": ["2021", "2022", "Ave 2016-2021"],
        "range": ["red", "orange", "blueviolet"]
      },
      "type": "ordinal"
    }
  },
  "layer": [
    {
      "mark": {"type": "line", "stroke": "red"},
      "transform": [{"filter": "datum.year ==2021"}]
    },
    {
      "mark": {"type": "line", "stroke": "orange"},
      "transform": [{"filter": "datum.year ==2020"}]
    },
    {
      "mark": {"type": "line", "stroke": "blueviolet", "interpolate": "basis"},
      "transform": [
        {"filter": "datum.year <= 2021 && datum.year >= 2016"},
        {
          "aggregate": [{"op": "mean", "field": "price", "as": "price"}],
          "groupby": ["month"]
        }
      ]
    }
  ],
  "data": {
    "values": [
      {"t": "2021-06-01T00:00:00", "price": 500},
      {"t": "2012-12-01T00:00:00", "price": 130},
      {"t": "2012-02-01T00:00:00", "price": 153},
      {"t": "2020-05-01T00:00:00", "price": 400},
      {"t": "2015-08-01T00:00:00", "price": 170},
      {"t": "2015-01-01T00:00:00", "price": 140},
      {"t": "2014-11-01T00:00:00", "price": 130},
      {"t": "2009-08-01T00:00:00", "price": 110},
      {"t": "2012-03-01T00:00:00", "price": 130},
      {"t": "2019-11-01T00:00:00", "price": 400},
      {"t": "2017-09-01T00:00:00", "price": 180},
      {"t": "2009-10-01T00:00:00", "price": 220},
      {"t": "2014-07-01T00:00:00", "price": 146},
      {"t": "2015-03-01T00:00:00", "price": 160},
      {"t": "2012-06-01T00:00:00", "price": 160},
      {"t": "2018-05-01T00:00:00", "price": 220},
      {"t": "2016-11-01T00:00:00", "price": 195},
      {"t": "2019-10-01T00:00:00", "price": 400},
      {"t": "2011-02-01T00:00:00", "price": 130},
      {"t": "2021-03-01T00:00:00", "price": 500},
      {"t": "2019-02-01T00:00:00", "price": 317.5},
      {"t": "2012-09-01T00:00:00", "price": 140},
      {"t": "2018-08-01T00:00:00", "price": 250},
      {"t": "2015-11-01T00:00:00", "price": 186},
      {"t": "2010-05-01T00:00:00", "price": 120},
      {"t": "2010-02-01T00:00:00", "price": 130},
      {"t": "2010-09-01T00:00:00", "price": 150},
      {"t": "2017-10-01T00:00:00", "price": 180},
      {"t": "2018-01-01T00:00:00", "price": 200},
      {"t": "2020-02-01T00:00:00", "price": 400},
      {"t": "2020-07-01T00:00:00", "price": 375},
      {"t": "2018-06-01T00:00:00", "price": 232.5},
      {"t": "2019-04-01T00:00:00", "price": 322.5},
      {"t": "2014-02-01T00:00:00", "price": 130},
      {"t": "2016-01-01T00:00:00", "price": 143},
      {"t": "2019-07-01T00:00:00", "price": 400},
      {"t": "2014-12-01T00:00:00", "price": 135},
      {"t": "2009-05-01T00:00:00", "price": 110},
      {"t": "2020-03-01T00:00:00", "price": 330},
      {"t": "2019-09-01T00:00:00", "price": 400},
      {"t": "2013-02-01T00:00:00", "price": 135},
      {"t": "2009-12-01T00:00:00", "price": 150},
      {"t": "2017-07-01T00:00:00", "price": 195},
      {"t": "2020-10-01T00:00:00", "price": 400},
      {"t": "2016-10-01T00:00:00", "price": 205},
      {"t": "2015-07-01T00:00:00", "price": 180},
      {"t": "2018-03-01T00:00:00", "price": 200},
      {"t": "2012-05-01T00:00:00", "price": 165},
      {"t": "2013-10-01T00:00:00", "price": 135},
      {"t": "2012-10-01T00:00:00", "price": 130},
      {"t": "2016-07-01T00:00:00", "price": 150},
      {"t": "2011-08-01T00:00:00", "price": 200},
      {"t": "2019-03-01T00:00:00", "price": 320},
      {"t": "2017-08-01T00:00:00", "price": 180},
      {"t": "2013-06-01T00:00:00", "price": 135},
      {"t": "2015-05-01T00:00:00", "price": 153},
      {"t": "2020-09-01T00:00:00", "price": 460},
      {"t": "2014-06-01T00:00:00", "price": 140},
      {"t": "2011-06-01T00:00:00", "price": 145},
      {"t": "2018-12-01T00:00:00", "price": 300},
      {"t": "2021-02-01T00:00:00", "price": 450},
      {"t": "2017-03-01T00:00:00", "price": 210},
      {"t": "2015-04-01T00:00:00", "price": 190}
    ]
  },
  "transform": [
    {"calculate": "year(datum.t)", "as": "year"},
    {"calculate": "month(datum.t)", "as": "month"}
  ]
}