单位图表进度条

Question

有谁知道如何将进度条图表更改为单位图表进度条（最好以 10 为单位）。类似下图所示：

{
  "width": 300,
  "height": {"step": 30},
  "data": {
    "values": [
      {"region": "Central", "achieved": 0.218, "remaining": 0.782},
      {"region": "East", "achieved": 0.295, "remaining": 0.705},
      {"region": "West", "achieved": 0.171, "remaining": 0.829},
      {"region": "South", "achieved": 0.316, "remaining": 0.684}
    ]

  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "region", "type": "nominal"},
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": null
    },
    "color": {"field": "label", "type": "nominal", 
    "scale": {"range": ["blue", "lightgrey"]}
}
  }
}

Answer 1

以下内容应该可以帮助您完成大部分工作。

{
  "width": 300,
  "height": 180,
  "view": {"strokeWidth": 0},
  "data": {
    "values": [
      {"region": "Central", "achieved": 0.218, "remaining": 0.782},
      {"region": "East", "achieved": 0.295, "remaining": 0.705},
      {"region": "West", "achieved": 0.171, "remaining": 0.829},
      {"region": "South", "achieved": 0.316, "remaining": 0.684}
    ]
  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "encoding": {
    "y": {
      "field": "region",
      "type": "nominal",
      "title": null,
      "axis": {
        "domain": false,
        "ticks": false,
        "labelPadding": 60,
        "labelColor": "grey"
      }
    },
    "x": {"field": "percentage", "type": "quantitative", "axis": null},
    "color": {
      "legend": null,
      "field": "label",
      "type": "nominal",
      "scale": {"range": ["#b5adaa", "#d9d9d9"]}
    }
  },
  "layer": [
    {"mark": {"type": "bar", "height": {"band": 0.3}}},
    {
      "mark": {"type": "text", "xOffset": -25},
      "encoding": {
        "x": {"value": 0},
        "text": {"field": "percentage", "format": ".2%"},
        "color": {
          "condition": {
            "test": "datum.label == 'remaining'",
            "value": "transparent"
          },
          "value": "grey"
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeWidth": 5},
      "data": {
        "values": [
          {"x": 0.1},
          {"x": 0.2},
          {"x": 0.3},
          {"x": 0.4},
          {"x": 0.5},
          {"x": 0.6},
          {"x": 0.7},
          {"x": 0.8},
          {"x": 0.9}
        ]
      },
      "encoding": {
        "x": {"field": "x", "type": "quantitative", "axis": null},
        "y": {},
        "color": {"value": "white"}
      }
    }
  ]
}