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

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

How do you create a partial pie chart on vega-lite for single data point?

javascript

charts

vega

vega-lite

airtable