vega-lite - 是否可以有带有灰色弧线的圆环图列指示缺失的部分？

Question

目前，圆环图假定最大值为 100%。我想要的是中文类别的百分比为 50%，灰色弧线表示缺失的 50%。其他两个圆环图在各自列中的行为相似。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple donut chart with embedded data.",
  "data": {
    "values": [
      {"category": "English", "value": 4},
      {"category": "Malay", "value": 6},
      {"category": "Chinese", "value": 10}
    ]
  },
  "mark": {"type": "arc", "innerRadius": 80},
  "encoding": {
    "column": {"field": "category"},
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  },
  "view": {"stroke": null}
}

标签： vega-lite

Answer 1

它有点复杂，但一种方法是使用转换来计算总数，然后使用层图在背景中绘制该总数。

这是一个示例（在编辑器中打开）：

{
  "data": {
    "values": [
      {"category": "English", "value": 4},
      {"category": "Malay", "value": 6},
      {"category": "Chinese", "value": 10}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "sum", "field": "value", "as": "total"}]}
  ],
  "facet": {"column": {"field": "category"}},
  "spec": {
    "layer": [
      {
        "mark": {"type": "arc", "innerRadius": 80, "color": "lightgray"},
        "encoding": {"theta": {"field": "total", "type": "quantitative"}}
      },
      {
        "mark": {"type": "arc", "innerRadius": 80},
        "encoding": {
          "theta": {"field": "value", "type": "quantitative"},
          "color": {"field": "category"}
        }
      }
    ],
    "view": {"stroke": null}
  }
}