Vega Lite / Kibana - 区域标记不显示任何值

Question

我有一个非常简单的问题，但我对 Vega/Vega-Lite 完全陌生，教程示例对解决我的问题没有多大帮助。

当我尝试显示我的浮点值时，只有 Mark: Point/Bar 似乎可以工作。其他需要在相邻点之间建立连接的东西似乎都失败了，比如“区域”或“线”。

为了将我的价值观与面积图联系起来，我遗漏了什么？ 聚合？层？时间戳值计算错误吗？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "default-*",
      "body": {"size": 10000, "_source": ["@timestamp", "numericData"]}
    },
    "format": {"property": "hits.hits"}
  },
  "transform": [
    {"calculate": "toDate(datum._source['@timestamp'])", "as": "time"}
  ],
  "vconcat": [
    {
      "width": 1200,
      "mark": {"type": "area", "line": true, "point": true},
      "encoding": {
        "x": {
          "field": "time",
          "scale": {"domain": {"selection": "brush"}},
          "type": "temporal",
          "axis": {"title": ""}
        },
        "y": {
          "field": "_source.numericData",
          "type": "quantitative",
          "scale": {"domain": [0, 10]}
        }
      }
    },
    {
      "width": 1200,
      "height": 60,
      "mark": {"type": "area", "line": true, "point": true},  // <-- only points are rendered :(
      "selection": {"brush": {"type": "interval", "encodings": ["x"]}},
      "encoding": {
        "x": {"field": "time", "type": "temporal"},
        "y": {
          "field": "_source.numericData",
          "type": "quantitative",
          "formatType": "String",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

点是可见的 - 值在那里，但区域没有被渲染，因为，我怀疑，我需要告诉 Vega Lite 解释 Y 上的数字浮点值，以便在整个时间域内解释。

Answer 1

你没有分享你的数据，所以我只能猜测为什么会这样。但是您可能会看到此结果的一个原因是您的数据中是否散布了空值。这是一个简单的例子（open in editor）：

{
  "data": {
    "values": [
      {"x": 1, "y": 1},
      {"x": 2, "y": null},
      {"x": 3, "y": 2},
      {"x": 4, "y": null},
      {"x": 5, "y": 3},
      {"x": 6, "y": null}
    ]
  },
  "mark": {"type": "area", "point": true, "line": true},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

与 ponts 不同，线和区域不是通过单个值定义的，而是通过相邻值定义的。因为没有成对的相邻非空值，所以没有地方可以画线或区域。

如果是这种情况，您可以使用适当的过滤器变换 (open in editor) 移除空点：

{
  "data": {
    "values": [
      {"x": 1, "y": 1},
      {"x": 2, "y": null},
      {"x": 3, "y": 2},
      {"x": 4, "y": null},
      {"x": 5, "y": 3},
      {"x": 6, "y": null}
    ]
  },
  "transform": [{"filter": "isValid(datum.y)"}],
  "mark": {"type": "area", "point": true, "line": true},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}