Vega-lite 在具有多個度量的分組條形圖中顯示數據 label

Question

我正在嘗試自定義下面的圖表以在條形圖中添加數據標簽。 你能幫忙嗎？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/movies.json"
  },
  "repeat": {"layer": ["Worldwide Gross", "US Gross"]},
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "Major Genre",
        "type": "nominal"
      },
      "y": {
        "aggregate": "sum",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Total Gross"
      },
      "color": {"datum": {"repeat": "layer"}, "title": "Gross",
      "scale": {"range": ["#2a9d8f", "#e76f51"]}},
      "xOffset": {"datum": {"repeat": "layer"}}
    }
  },
  "config": {
    "mark": {"invalid": null}
  }
}

可視化

鏈接： https://vega.github.io/editor/#/examples/vega-lite/bar_grouped_repeated

我需要將數據 label 顯示到此分組條形圖。

Answer 1

添加標簽如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "x", "value": 0.1},
      {"category": "A", "group": "y", "value": 0.6},
      {"category": "A", "group": "z", "value": 0.9},
      {"category": "B", "group": "x", "value": 0.7},
      {"category": "B", "group": "y", "value": 0.2},
      {"category": "B", "group": "z", "value": 1.1},
      {"category": "C", "group": "x", "value": 0.6},
      {"category": "C", "group": "y", "value": 0.1},
      {"category": "C", "group": "z", "value": 0.2}
    ]
  },
  "encoding": {
    "x": {"field": "category"},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group"},
    "color": {"field": "group"}
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {"type": "text", "dy": -5},
      "encoding": {"text": {"field": "value"}}
    }
  ]
}