如何在 vega-lite 上為單個數據點創建部分餅圖？

Question

我正在使用 vega-lite 創建一個餅圖（在 Airtable 上）。 我有一個數據點，這是我設定的目標，以及該目標的完成百分比。 例如，如下所示：

{
        "Target": "Get 10 customers",
        "Percentage complete": "60"
}

我想制作一個完成 60% 的餅圖，並且 rest 為空。 類似於顯示的交互式單弧餅圖https://vega.github.io/vega-lite/docs/arc.html 。

我的代碼目前看起來像這樣

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Customer Acquired",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {
        "Target": "Get 10 customers",
        "Percentage complete": "60"
      }
  ]},
  "mark": {
    "type": "arc",
    "tooltip": true
  },
  "encoding": {
    "theta": {
      "field": "Percentage complete",
      "type": "quantitative"
    }
  }
}

我的餅圖目前看起來像這樣：

我意識到我可以通過像這樣手動設置 theta2 屬性來強制餅圖以我想要的方式出現

"mark": {
    "type": "arc",
    "tooltip": true,
    "theta2": 3.5
}

但是我不知道“完成百分比”字段是什么，而且這個值可能會經常變化，所以我寧願不必手動進行。 vega-lite 有可能嗎？

Answer 1

theta 編碼的域將自動設置為輸入數據的最小值和最大值。 要顯示圖表的正確部分，您需要將域設置為[0, 100] ：

  "encoding": {
    "theta": {
      "field": "Percentage complete",
      "type": "quantitative",
      "scale": {"domain": [0, 100]}
    }
  }

您可以在vega 編輯器中查看生成的圖表：