Kibana:如何在 Canvas 中实现 gauge 并动态设置颜色

在 canvas 中,我们可以使用 gauge 来实现像电池电量,油表,速度等指标的显示。在今天的例子中,我们来展示如何在 canvas 中实现 gauge 可视化,并依据不同的指标而设置不同的颜色。

                          

如何在 canvas 中实现 gauge 并动态设置颜色

准备数据

在今天的实验中,我们用一个很简单的数据来进行展示:

PUT _ingest/pipeline/add-timestamp
{
  "processors": [
    {
      "set": {
        "field": "@timestamp",
        "value": "{{_ingest.timestamp}}"
      }
    }
  ]
}

POST battery/_doc?pipeline=add-timestamp
{
  "id": 1,
  "level": 60
}

我们在 Kibana 的 console 中依次执行上面的指令,它就创建了一个叫做 battery 的索引,并同时生产一个事件。如果我们执行下面的命令多次,它将会生产不同事件的事件。

GET battery/_search
{
  "took" : 2,
  "timed_out" : false,
  "_shards" : {
    "total" : 1,
    "successful" : 1,
    "skipped" : 0,
    "failed" : 0
  },
  "hits" : {
    "total" : {
      "value" : 1,
      "relation" : "eq"
    },
    "max_score" : 1.0,
    "hits" : [
      {
        "_index" : "battery",
        "_type" : "_doc",
        "_id" : "uFyU_nUBwJJxmQ8gkaLS",
        "_score" : 1.0,
        "_source" : {
          "@timestamp" : "2020-11-24T15:16:41.143951Z",
          "level" : 60,
          "id" : 1
        }
      }
    ]
  }
}

在上面,我们把当前的时间写入到事件中。如果你不知道是如何工作的,请参阅我之前的文章 “Elasticsearch:如何在写入文档时加上 now 时间标签”。上面的命令生成一个叫做 battery 的索引。在实际的物联网应用中,这个可能对应于一个手机或者汽车的电池量。

 

在 canvas 中显示 gauge 可视化

接下来,我们在 canvas 中显示 gauge 并依据我们的设定根据不同的值显示不同的颜色:

 

点击 Expression editor 并把如下的代码拷贝到编辑器中:

filters
| essql 
  query="SELECT level FROM \"battery\" WHERE id = 1 ORDER by \"@timestamp\" DESC LIMIT 1"
| math "level"
| progress shape="gauge" label={formatnumber "0"} 
  font={font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" color={switch {case if={gte 66} then="green"} {case if={all {gt 33} {lte 66}} then="orange"} default="red"} align="center"}
  valueColor={switch {case if={gte 66} then="green"} {case if={all {gt 33} {lte 66}} then="orange"} default="red"} max=100 
| render

在上面,我们从 battery 索引中获取数据。请注意上面的 query 语句。它获取 battery 索引中的最近一条数据来做展示。当 level 大于 66 时,显示 green;当 level 大于 33 而小于 66 时,显示 orange 颜色;当 level 为其它的值时,显示为红色。

点击上面的 Run 按钮。

我们接着在 Console 中运行如下的命令:

POST battery/_doc?pipeline=add-timestamp
{
  "id": 1,
  "level": 30
}

我们可以在 canvas 中看到:

上面显示为红色。当我们把 level 值设置为 50 的话:

POST battery/_doc?pipeline=add-timestamp
{
  "id": 1,
  "level": 50
}

上面显示为 orange 颜色。 当我们设置 level 为80时:

POST battery/_doc?pipeline=add-timestamp
{
  "id": 1,
  "level": 80
}

那么 gauge 的显示为 green:

 

已标记关键词 清除标记
相关推荐