如何在 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 编辑器中查看生成的图表：