如何在Vega Lite分组条形图中添加文本标记

问题描述 投票:1回答:1

我无法在分组的条形图中添加文本标记层,我尝试编辑Vega Lite example以在每个条形图的顶部添加总和标签:

enter image description herehttps://vega.github.io/editor/#/examples/vega-lite/bar_grouped

但是发生的情况是要么不接受“ layer”属性,要么将小节压缩成一个小节。如何做到这一点?

data-visualization vega-lite
1个回答
0
投票

当您想要在多面图表上添加文本标记时,要使用的模式是Layered view中的Facet Operator

例如(vega editor):

{
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "width": {"step": 12},
  "facet": {"field": "age", "type": "ordinal"},
  "spec": {
    "encoding": {
      "y": {
        "aggregate": "sum",
        "field": "people",
        "type": "quantitative",
        "axis": {"title": "population", "grid": false}
      },
      "x": {"field": "gender", "type": "nominal", "axis": {"title": ""}}
    },
    "layer": [
      {
        "mark": "bar",
        "encoding": {
          "color": {
            "field": "gender",
            "type": "nominal",
            "scale": {"range": ["#675193", "#ca8861"]}
          }
        }
      },
      {
        "mark": {
          "type": "text",
          "dx": -5,
          "angle": 90,
          "baseline": "middle",
          "align": "right"
        },
        "encoding": {
          "text": {
            "aggregate": "sum",
            "field": "people",
            "type": "quantitative",
            "format": ".3s"
          }
        }
      }
    ]
  },
  "config": {
    "view": {"stroke": "transparent"},
    "facet": {"spacing": 10},
    "axis": {"domainWidth": 1}
  }
}

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.