如何在 vegaLite 中的栏上添加“%”符号文本标签

Question

我正在尝试创建带有文本标签的组条形图。 我无法找到如何在栏上的文本标签中“%”。

有什么办法可以让我实现这个目标吗？ 栏上的预期文本 -> 对于 50，应分别在栏顶部显示 50% 编辑链接

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "x", "percentage": 10},
      {"category": "A", "group": "y", "percentage": 20},
      {"category": "A", "group": "z", "percentage": 40},
      {"category": "B", "group": "x", "percentage": 50},
      {"category": "B", "group": "y", "percentage": 60},
      {"category": "B", "group": "z", "percentage": 70},
      {"category": "C", "group": "x", "percentage": 50},
      {"category": "C", "group": "y", "percentage": 40},
      {"category": "C", "group": "z", "percentage": 30}
    ]
  },
  "encoding": {
    "x": {"field": "category"},
    "y": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {"labelExpr": "datum.value+'%'"}
    },
    "xOffset": {"field": "group"}
  },
  "layer": [
    {"mark": "bar", "encoding": {"color": {"field": "group"}}},
    {
      "mark": {"type": "text", "align": "left", "baseline": "middle", "dx": -5},
      "encoding": {"text": {"value":{"expr": "datum.percentage + '%'"} }}
    }
  ]
}