根据 vega lite 中的基准更改填充颜色

【问题标题】：根据 vega lite 中的基准更改填充颜色(Change color of fill based off of datum in vega lite)
【发布时间】：2022-01-03 01:24:47
【问题描述】：

我正在使用 ELK 来可视化使用 MTConnect 从我们的机器输出的日志。我有一个仪表板，我设置为每六十秒更新一次，我想为每台机器设置一个正方形和一个名为“lastEvent”的字段。 “lastEvent”可以有六种状态：ACTIVE、READY、STOPPED、INTERRUPTED、PROGRAM_STOPPED 和 UNAVAILABLE。每个方块都已设置为仅通过 Elastic Search 处理其机器的日志。

我想要的是根据最新日志的“lastEvent”更改方块的颜色，并且每次刷新仪表板时都会更新此颜色。在下面的代码中，我希望收到 ACTIVE 时方块是蓝色的，但方块是粉红色的，这表明没有满足条件。

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
  "url": {
    "%context%": false,
    "%timefield%": "@timestamp",
    "index": "mtconnect*",
  },
},

"height": "container",
"width": "container",

"mark": "rect",
"encoding": {
  "color": {
    "condition": [
        {"test": "datum['lastEvent'] === 'ACTIVE'", "value": "green"},
        {"test": "datum['lastEvent'] === 'STOPPED'", "value": "red"},
        {"test": "datum['lastEvent'] === 'READY'", "value": "blue"},
        {"test": "datum['lastEvent'] === 'UNAVAILABLE'", "value": "black"},
        {"test": "datum['lastEvent'] === 'PROGRAM_STOPPED'", "value": "pink"},
        {"test": "datum['lastEvent'] === 'FEED_HOLD'", "value": "purple"},
        {"test": "datum['lastEvent'] === 'INTERRUPTED'", "value": "yellow"}
        ],
    "value": "Pink"
  }
}
}

方块确实显示正确，因此没有解析错误，并且每个日志都有各自机器的“lastEvent”字段。将条件减少到仅一项测试并不能解决问题。

编辑：条件很好。相反，问题在于从索引中获取数据并对其进行正确评估。

我发现了两个问题。首先是通过的文件数量。目前每个文档都在进行评估，我只想评估最新的文档。

第二个问题是当我通过文本标记发送值时，“lastEvent”被评估为未定义。当我使用测试数据时，值显示正确，但当我尝试从索引中提取时，情况并非如此。由于某种原因，测试数据中的“ACTIVE”与索引中的“ACTIVE”不同。

当索引中的数据传递到 Vega 时，它会进入一个标记为“命中”的部分。来自热门歌曲的所有内容都显示在一行中，因此可能是格式问题。

【解决方案1】：

如果我理解正确，您是说提供的条件不适用于您的 lastEvent ，但我尝试了您的示例，条件似乎完全正常。下面是带有示例数据的配置，它为您的 lastEvent 显示正确的颜色。如果我误解了您的要求，请告诉我。

参考以下代码或 editor 链接：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"lastEvent": "STOPPED", "x": 10, "y": 20},
      {"lastEvent": "READY", "x": 30, "y": 30},
      {"lastEvent": "test", "x": 10, "y": 30}
    ]
  },
  "height": "container",
  "width": "container",
  "mark": "rect",
  "encoding": {
    "x": {"field": "x"},
    "y": {"field": "y"},
    "color": {
      "condition": [
        {"test": "datum['lastEvent'] === 'ACTIVE'", "value": "green"},
        {"test": "datum['lastEvent'] === 'STOPPED'", "value": "red"},
        {"test": "datum['lastEvent'] === 'READY'", "value": "blue"},
        {"test": "datum['lastEvent'] === 'UNAVAILABLE'", "value": "black"},
        {"test": "datum['lastEvent'] === 'PROGRAM_STOPPED'", "value": "pink"},
        {"test": "datum['lastEvent'] === 'FEED_HOLD'", "value": "purple"},
        {"test": "datum['lastEvent'] === 'INTERRUPTED'", "value": "yellow"}
      ],
      "value": "Pink"
    }
  }
}

不完全是需要的，但你的例子表明我正在寻找错误的错误位置。我曾假设“lastEvent”的最后一个值将是传递给条件块的值，但事实并非如此。我相信我需要使用转换来仅通过条件块发送最新的“lastEvent”值。
我在测试后包含了更多信息。这个问题似乎更像是 Kibana 和 Vega 之间的问题，而不仅仅是 Vega。

分享于2022年07月17日 elasticsearch kibana vega vega-lite 问答