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

问题描述

我正在使用 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 完全可以做到这一点吗？

解决方法

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

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

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

airtable charts javascript vega vega-lite