如何在vega-lite上创建单个数据点的部分饼图？

Question

我正在使用vega-lite创建一个饼图(在Airtable上)。我有一个数据点，这是我设置的目标，以及该目标的完成百分比。例如如下所示：

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

我想做一个完成了60%的饼图，其余的是空的。类似于交互式的单圆弧饼图显示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 editor中查看生成的图表：

​