如何在 vega lite 中的条形图上添加文本

Question

I am trying to add text label to bar chart, but it not showing it. Here is a example i want to achieve

Here is code

 { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "background": "#EFF1EF", "width": 500, "height": 26, "autosize":"pad", "data": { "values": [ { "standarts": { "divisions": [ { "a": { "mean": 135, "part1": 10, "part2": 60, "part5": 130, "part7": 198, "part9": 255, "goal": { "value": 150 } } } ] } } ] }, "transform": [ {"calculate": "datum.standarts.divisions", "as": "D"}, {"flatten": ["D"]}, {"calculate": "datum.Da", "as": "x"} ], "encoding": { "x": {"field": "x", "type": "quantitative","scale":{"domain":[0,300]}, "stack": null}, "opacity": {"value": 1} }, "layer": [ { "mark":{"type":"bar", "color": "#b2b7b4", "cornerRadius": 40}, "encoding": {"x": {}} }, { "mark": {"type": "bar", "color": "#0ef9e5", "height": 25}, "encoding": {"x": {"field": "x.mean"}} }, { "mark":{"type": "text", "align":"center"}, "encoding": {"text": {"field": "x.mean"}} }, { "mark":{"type": "rule"}, "encoding": {"x": {"field":"x.goal.value", "title":["Target"],"axis":{ "titleFont": "Google Sans", "titleFontSize": 16, "titleFontWeight":700, "titleY": 8} }}} ], "config": { "axis": {"ticks": false, "labels": false, "domain": false}, "rule": { "strokeWidth": 4, "strokeDash": [ 0.2, 8 ], "strokeCap": "round", "align":"center" } } }

this is code And link to editor vega-lite editor

text part is still not working.

I used documentation on vega-lite website and example codes, but still no success.

Thanks for the help.

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "background": "#EFF1EF",
  "width": 500,
  "height": 26,
  "autosize": "pad",
  "data": {
    "values": [
      {
        "standarts": {
          "divisions": [
            {
              "a": {
                "mean": 135,
                "part1": 10,
                "part2": 60,
                "part5": 130,
                "part7": 198,
                "part9": 255,
                "goal": {"value": 150}
              }
            }
          ]
        }
      }
    ]
  },
  "transform": [
    {"calculate": "datum.standarts.divisions", "as": "D"},
    {"flatten": ["D"]},
    {"calculate": "datum.D.a", "as": "x"}
  ],
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "scale": {"domain": [0, 300]},
      "stack": null
    },
    "opacity": {"value": 1}
  },
  "layer": [
    {
      "mark": {"type": "bar", "color": "#b2b7b4", "cornerRadius": 40},
      "encoding": {"x": {}}
    },
    {
      "mark": {"type": "bar", "color": "#0ef9e5", "height": 25},
      "encoding": {"x": {"field": "x.mean"}}
    },
    {
      "mark": {"type": "text", "align": "right", "dx": -10},
      "encoding": {"text": {"field": "x.mean"}, "x": {"field": "x.mean"}}
    },
    {
      "mark": {"type": "text", "align": "center", "dy": -30},
      "encoding": {
        "text": {"field": "x.goal.value"},
        "x": {"field": "x.goal.value"}
      }
    },
    {
      "mark": {"type": "rule"},
      "encoding": {
        "x": {
          "field": "x.goal.value",
          "title": ["Target"],
          "axis": {
            "titleFont": "Google Sans",
            "titleFontSize": 16,
            "titleFontWeight": 700,
            "titleY": 8
          }
        }
      }
    }
  ],
  "config": {
    "axis": {"ticks": false, "labels": false, "domain": false},
    "rule": {
      "strokeWidth": 4,
      "strokeDash": [0.2, 8],
      "strokeCap": "round",
      "align": "center"
    }
  }
}