如何在 vega-lite 中创建进度条？

Question

Could someone please show me how to create a simple Progress Bar in vega-lite using the following data? Thanks in advance.

SEGMENT	ACHIEVED	REMAINING
Enterprise	73.1%	26.9%

Answer 1

If I'm understanding your question correctly, you can do something like this ( view in editor ):

{
  "data": {
    "values": [{"segment": "Enterprise", "achieved": 0.731, "remaining": 0.269}]
  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "segment", "type": "nominal"},
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {"format": ".0%"}
    },
    "color": {"field": "label", "type": "nominal"}
  }
}