Milestone-like Vega Lite 中的规则标记

Question

我想在我的图表中放置里程碑占位符，类似于图片中黄色箭头所指示的：

这是否可以在 Vega Lite 中实现（X 轴是时间轴）？我检查了 Rule 标记和 Text 标记它的属性，但不知道如何使用它们来创建里程碑。

Answer 1

您可以使用 rule 和 text 标记的分层来做到这一点。这是一个简短的例子 (view in editor):

{
  "datasets": {
    "line-data": [
      {"x": "2020-01-31", "y": 0.9},
      {"x": "2020-02-29", "y": 0.9},
      {"x": "2020-03-31", "y": 2.0},
      {"x": "2020-04-30", "y": 2.9},
      {"x": "2020-05-31", "y": 3.7},
      {"x": "2020-06-30", "y": 4.4},
      {"x": "2020-07-31", "y": 4.8},
      {"x": "2020-08-31", "y": 6.0},
      {"x": "2020-09-30", "y": 6.6}
    ],
    "rule-data": [
      {"x": "2020-04-01", "y": 5, "labels": "event 1"},
      {"x": "2020-06-01", "y": 6, "labels": "event 2"},
      {"x": "2020-07-01", "y": 8, "labels": "event 3"}
    ]
  },
  "encoding": {
    "x": {"type": "temporal", "field": "x"},
    "y": {"type": "quantitative", "field": "y", "scale": {"domain": [0, 10]}},
    "text": {"type": "nominal", "field": "labels"}
  },
  "layer": [
    {"data": {"name": "line-data"}, "mark": "line"},
    {
      "data": {"name": "rule-data"},
      "mark": {"type": "rule", "strokeDash": [2, 2]}
    },
    {
      "data": {"name": "rule-data"},
      "mark": {"type": "text", "align": "right", "dy": -5}
    }
  ],
  "width": 600
}

Milestone-like Vega Lite 中的规则标记

Milestone-like Rule marks in Vega Lite

vega-lite