kibana - Vega-lite 热图文本属性
问题描述
一天中的好时光!
所有文本 - https://github.com/vega/vega-lite/issues/5697
- 在块中构建数据时,我想更改块中文本的字体大小和位置。使用了文档 - https://vega.github.io/vega-lite/docs/title.html,但它不起作用。
堵塞:
{
"mark": "text"
"encoding": {
"text": {"field": "z", "type": "quantitative"}
"color": {"value": "black"}
"fontSize": 40
}
更改位置将允许添加第二个文本:
完整代码:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
"config": {"view": {"height": 300, "width": 400}},
"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 4},
#{"x": 3, "y": 0, "z": 9},
{"x": 4, "y": 0, "z": 16},
#{"x": 5, "y": 0, "z": 25},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
#{"x": 4, "y": 1, "z": 17},
{"x": 5, "y": 1, "z": 26}]
},
"encoding": {
"x": {"field": "x", "type": "ordinal", title: "X"}
"y": {"field": "y", "type": "ordinal", title: "Y"}
}
"layer": [
{
"mark": "rect"
from: {data: "values"}
"encoding": {
"color": {
"field": "z"
"scale": {"scheme": "redyellowgreen"}
"type": "quantitative"
}
}
}
{
"mark": "text"
"encoding": {
"text": {"field": "z", "type": "quantitative"}
"color": {"value": "black"}
"fontSize": 40
}
}
]
}
2 我想要一张没有空格的温度图。如果创建一个变量以通过“groupby”计算所有 x 是可能的:[y]
请帮帮我。
解决方案
没有fontSize
编码,但您可以设置fontSize
标记属性:
{
"mark": {"type": "text", "fontSize": 40},
"encoding": {
"text": {"field": "z", "type": "quantitative"},
"color": {"value": "black"}
}
}
要垂直偏移文本,可以使用dy
mark 属性,它指定垂直偏移文本的像素数:
{
"mark": {"type": "text", "fontSize": 20, "dy": -20},
"encoding": {
"text": {"value": "text"},
"color": {"value": "black"}
}
}
至于计算新的 x 值以填充空格,您可以使用Window Transform来完成。
这是您的示例的修改版本,它将所有这些放在一起(在 vega 编辑器中查看):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
"config": {"view": {"height": 300, "width": 400}},
"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 4},
{"x": 4, "y": 0, "z": 16},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
{"x": 5, "y": 1, "z": 26}
]
},
"transform": [
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
],
"encoding": {
"x": {"field": "x2", "type": "ordinal", "title": "X"},
"y": {"field": "y", "type": "ordinal", "title": "Y"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "z",
"scale": {"scheme": "redyellowgreen"},
"type": "quantitative"
}
}
},
{
"mark": {"type": "text", "fontSize": 20, "dy": -20},
"encoding": {
"text": {"value": "text"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "fontSize": 40, "dy": 20},
"encoding": {
"text": {"field": "z", "type": "quantitative"},
"color": {"value": "black"}
}
}
]
}
推荐阅读
- c++ - 是否可以在类的构造过程中将静态函数分配给公共成员函数?
- java - 由于“源版本 1.8 需要目标版本 1.8”,Android 打包失败
- c++ - 如何修复重载增量和 + 运算符并最终导致分段错误?
- swift - 如何使用自定义哈希函数创建 Set
- c - 试图在C中增加一个字符串指针
- javascript - 访问 JSON 中的元素(Node js)
- php - 如何在 PHP 中找到具有 N'ary 继承类的根类
- python-3.x - 如何让我的 discord.py 机器人在语音频道中播放 mp3?
- php - 提交时显示空白白屏的引导程序和 PHP 登录表单
- if-statement - 如何在if语句中检查两者是否不相等?