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

【问题标题】：How do you create a partial pie chart on vega-lite for single data point?如何在 vega-lite 上为单个数据点创建部分饼图？
【发布时间】：2021-05-15 12:21:20
【问题描述】：

我正在使用 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 有可能吗？

【问题讨论】：

标签： javascript charts vega-lite vega airtable

【解决方案1】：

theta 编码的域将自动设置为输入数据的最小值和最大值。要显示图表的正确部分，您需要将域设置为 [0, 100]：

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

您可以在vega editor 中查看生成的图表：

【讨论】：