时间戳

首页 > 解决方案 > 如何使用复选框更改 vega-lite 可视化中文本的背景和颜色？

kibana - 如何使用复选框更改 vega-lite 可视化中文本的背景和颜色？

问题描述

也许你可以帮忙。我想创建一个复选框，允许您更改文本的背景和颜色。我有一个使用复选框和 fillOpacity 的示例（填充不透明度（值介于 [0,1] 之间），编辑器。此代码在 Kibana 中不起作用（错误：找不到名为“Show”的选择），更改了字段，源

"params": [{
   "name": "Show",
   "bind": {"input": "checkbox"}
}]

至

"selection": {
  "Show": {
    "type": "single",
    "bind": {"input": "checkbox"}
  }
 }

编辑器，图像

现在代码在 Kibana 和 vega 编辑器中工作并且不正确。但这只是一个布局，在技术上是否可以改变陈列柜中整个文本的背景和颜色？

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "config": {"view": {"stroke": "transparent"}},
    
    "selection": {
        "Show": {
        "type": "single",
        "bind": {"input": "checkbox"}
        }
    },
    
    "data": {"values": [{"a": 28}]},
    
    "background": "orange",
    
    "mark": {"type": "text", "fill": "red","fontSize": 100},
    
    "encoding": {
        "fillOpacity": {
        "condition": {"value": 0, "selection": "Show"},
        "value": 1
        },
        "text": {
        "field": "a",
        "type": "quantitative"
        }
    }
}

标签： kibanavega-litevega

解决方案

是的，可以通过简单地使用expr与您的参数名称绑定的配置来更改文本的背景和颜色checkbox。在提到的问题中，说明了为什么不将复选框与selection术语一起使用的原因，因此引入了参数，并在该 url 中给出了一个示例。

但是您可以参考编辑器和下面的代码片段来更改背景和文本颜色：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "config": {"view": {"stroke": "transparent"}},
  "params": [{"name": "Show", "bind": {"input": "checkbox"}}],
  "data": {"values": [{"a": 28}]},
  "background": {"expr": "Show ? 'yellow' : 'orange'"},
  "mark": {
    "type": "text",
    "fill": {"expr": "Show ? 'red' : 'yellow'"},
    "fontSize": 100
  },
  "encoding": {"text": {"field": "a", "type": "quantitative"}}
}

推荐阅读