Vega-lite热图文本属性

时间:2019-12-19 08:14:48

标签: kibana heatmap vega vega-lite

一天中的好时光!

所有文字-https://github.com/vega/vega-lite/issues/5697

  1. 在块中构建数据时,我想更改字体大小和文本在块中的位置。使用了文档-https://vega.github.io/vega-lite/docs/title.html,但无效。

阻止:

nodes <- list(length(unique(telar)))
## Here something to create the new time series matrix
my_hts <- hts(new_time_series_matrix, nodes)

更改位置将允许添加第二个文本:

完整代码:

{
    "mark": "text"
     "encoding": {
      "text": {"field": "z", "type": "quantitative"}
      "color": {"value": "black"}
      "fontSize": 40
}  

2我想要一个没有空格的温度图。如果创建一个变量,则可以通过“ groupby”对所有x进行计数:[y]

请帮助我。

1 个答案:

答案 0 :(得分:0)

没有fontSize编码,但是您可以设置fontSize mark property

{
  "mark": {"type": "text", "fontSize": 40},
  "encoding": {
    "text": {"field": "z", "type": "quantitative"},
    "color": {"value": "black"}
  }
}

要垂直偏移文本,可以使用dy标记属性,该属性指定垂直偏移文本的像素数:

{
  "mark": {"type": "text", "fontSize": 20, "dy": -20},
  "encoding": {
    "text": {"value": "text"},
    "color": {"value": "black"}
  }
}

对于计算新的x值来填充空格,您可以使用Window Transform来完成。

这里是示例的修改版本,将所有这些内容放在一起(view in vega editor):

{
  "$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"}
      }
    }
  ]
}

enter image description here