Question

我有一个具有3个不同系列的折线图，在颜色编码，图例标签等方面都非常有用。我现在要做的是在整个绘图中以特定y值的虚线表示。以前，通常我只是通过添加另一个琐碎的数据集并单独设置该数据集的样式来实现此目的，但是我在VL中执行此操作有点卡住了。

到目前为止，我得到的进一步进展是this plot，这是尝试使用图层将多余的两个点相加以在y = 100％处画线。但是，由于某些原因，这些点没有加入，我也希望能够从图例中删除该系列，但我不确定如何（第一次使用图例）。

我还认为也许可行的方法是编辑y网格，但是我仍然想要y滴答声当前所在的位置，只是y = 100处的一条线，而我不确定如何对轴有选择性。

任何/所有帮助表示赞赏。

编辑：哦，在那个情节中，我也希望y标签只显示'％'而不显示其他虚拟序列。

Answer 1

如果要在图表的特定y值处添加一条线，则可以使用rule标记并显式设置y值。本质上是这样添加一层：

{
  "mark": "rule",
  "encoding": {"y": {"value": 100}}
}

以下是您添加此图表（vega editor）的结果：

{
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {
      "grid": false,
      "labelAngle": 0,
      "labelFont": "museo-sans-300",
      "labelFontSize": 15,
      "labelFontWeight": "normal",
      "titleFont": "museo-sans-300",
      "titleFontSize": 15,
      "titleFontWeight": "normal"
    }
  },
  "data": {"name": "data"},
  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "point": {"filled": true, "stroke": "white", "size": 100}
      },
      "title": {
        "text": "",
        "anchor": "middle",
        "font": "museo-sans-300",
        "fontSize": 20,
        "offset": 0,
        "fontWeight": "normal"
      },
      "encoding": {
        "tooltip": [
          {"field": "%", "type": "quantitative"},
          {"field": "metric", "type": "nominal"}
        ],
        "x": {
          "field": "date",
          "type": "temporal",
          "timeUnit": "monthdate",
          "axis": {"title": null, "tickCount": "day"}
        },
        "y": {
          "field": "%",
          "type": "quantitative",
          "axis": {"titleX": -50},
          "scale": {"domain": [0, 150]}
        },
        "color": {
          "field": "metric",
          "type": "nominal",
          "legend": {
            "labelFont": "museo-sans-300",
            "labelFontSize": 15,
            "title": null,
            "offset": 20,
            "rowPadding": 7.5
          }
        }
      }
    },
    {"mark": "rule", "encoding": {"y": {"value": 100}}}
  ],
  "width": 750,
  "height": 200,
  "autosize": {"type": "none"},
  "padding": {"top": 30, "left": 75, "right": 250, "bottom": 30},
  "datasets": {
    "data": [
      {"date": "2019-12-06", "metric": "Linehaul util. %", "%": 29},
      {"date": "2019-12-10", "metric": "Linehaul util. %", "%": 53},
      {"date": "2019-12-11", "metric": "Linehaul util. %", "%": 62},
      {"date": "2019-12-12", "metric": "Linehaul util. %", "%": 62},
      {"date": "2019-12-06", "metric": "Daily recovery %", "%": 97.1},
      {"date": "2019-12-09", "metric": "Daily recovery %", "%": 82.3},
      {"date": "2019-12-10", "metric": "Daily recovery %", "%": 76.7},
      {"date": "2019-12-11", "metric": "Daily recovery %", "%": 63.8},
      {"date": "2019-12-12", "metric": "Daily recovery %", "%": 91.9},
      {"date": "2019-12-06", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-07", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-08", "metric": "30d rolling recovery %", "%": 77.3},
      {"date": "2019-12-09", "metric": "30d rolling recovery %", "%": 77.9},
      {"date": "2019-12-10", "metric": "30d rolling recovery %", "%": 77.7},
      {"date": "2019-12-11", "metric": "30d rolling recovery %", "%": 74.7},
      {"date": "2019-12-12", "metric": "30d rolling recovery %", "%": 74.7}
    ]
  }
}

注意：最初的方法无效的原因是因为许多点的“％T”字段未定义，并且未定义的点之间未画线。您可以通过过滤未定义的点或使用不同的数据集绘制线层来解决此问题，但是使用规则标记总体上更简单。

将样式不同的数据添加到Vega Lite折线图

1 个答案: