根据 vega lite 中的基准更改填充颜色
Change color of fill based off of datum in vega lite
我正在使用 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 时,它会进入标记为“hits”的部分。命中的所有内容都显示在一长行中,因此可能是格式问题。
如果我没理解错的话,你是说所提供的条件不适用于你的 lastEvent
但我试过你的例子,条件似乎完全正常。下面是带有示例数据的配置,它为您的 lastEvent
显示了正确的颜色。如果我误解了您的要求,请告诉我。
参考以下代码或editor link:
{
"$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"
}
}
}
我和一位同事找出了导致问题的原因。当过滤器的结果到达 Vega 时,它被格式化为标记为“hits”的一大行。我们在下面添加了一个格式部分,使命中成为 属性,并且它得到了正确的评估。
"data": {
url": {
"%context%": true,
"%timefield%": "@timestamp",
"index": "mtconnect*"
},
"format": {"property": "hits.hits"}
}
方块现在可以根据实际数据而不是测试数据来改变颜色。
我正在使用 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 时,它会进入标记为“hits”的部分。命中的所有内容都显示在一长行中,因此可能是格式问题。
如果我没理解错的话,你是说所提供的条件不适用于你的 lastEvent
但我试过你的例子,条件似乎完全正常。下面是带有示例数据的配置,它为您的 lastEvent
显示了正确的颜色。如果我误解了您的要求,请告诉我。
参考以下代码或editor link:
{
"$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"
}
}
}
我和一位同事找出了导致问题的原因。当过滤器的结果到达 Vega 时,它被格式化为标记为“hits”的一大行。我们在下面添加了一个格式部分,使命中成为 属性,并且它得到了正确的评估。
"data": {
url": {
"%context%": true,
"%timefield%": "@timestamp",
"index": "mtconnect*"
},
"format": {"property": "hits.hits"}
}
方块现在可以根据实际数据而不是测试数据来改变颜色。