如何计算Vega-Lite饼图分组数量 实现提示展示与配色优化

实现方法 #

方法1：Vega-Lite规范内置计算（适配分组过多提示场景） #

直接在规范中添加数据转换逻辑，自动统计去重后的分组数量，同时可直接配置条件展示逻辑，修改后的完整规范示例如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "带分组数量统计的饼图",
  "data": {
    "values": [
      {"category": "a", "value": 4},
      {"category": "b", "value": 6},
      {"category": "c", "value": 10},
      {"category": "d", "value": 3},
      {"category": "e", "value": 7},
      {"category": "f", "value": 8},
      {"category": "f", "value": 8}
    ]
  },
  "transform": [
    // 先按分类字段聚合，得到实际的饼图分组
    {
      "aggregate": [{"op": "sum", "field": "value", "as": "total_value"}],
      "groupby": ["category"]
    },
    // 新增窗口计算，统计总分组数
    {
      "window": [{"op": "count", "as": "group_count"}]
    }
  ],
  "encoding": {
    "theta": {"field": "total_value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal"}
  },
  "layer": [
    // 饼图层，分组数<=6时显示
    {
      "mark": {"type": "arc", "outerRadius": 80},
      "transform": [{"filter": "datum.group_count <= 6"}]
    },
    // 标签层，分组数<=6时显示
    {
      "mark": {"type": "text", "radius": 90},
      "encoding": {
        "text": {"field": "category", "type": "nominal"}
      },
      "transform": [{"filter": "datum.group_count <= 6"}]
    },
    // 提示层，分组数>6时显示
    {
      "mark": {"type": "text", "fontSize": 16, "color": "red"},
      "encoding": {
        "text": {"value": "您的分组数量过多"}
      },
      "transform": [{"filter": "datum.group_count > 6"}, {"limit": 1}]
    }
  ]
}

逻辑说明：先通过aggregate转换按分类字段分组汇总，得到实际的饼图分组，再用window的count算子统计总分组数，后续通过过滤器控制不同层级的显隐即可。

方法2：宿主环境获取分组数（适配配色方案匹配场景） #

如果需要在Vega-Lite外部拿到分组数做配色适配，可在渲染图表时通过Vega View实例查询数据，JS环境代码示例：

vegaEmbed('#chart', spec).then(function(result) {
  const view = result.view;
  // 查询聚合后的分组数据，获取分组总数
  const groupedData = view.data('source_0');
  const groupCount = [...new Set(groupedData.map(d => d.category))].length;
  
  // 按分组数匹配配色
  let colorScheme;
  if (groupCount <= 6) {
    colorScheme = 'category10';
  } else if (groupCount <= 12) {
    colorScheme = 'category20';
  }
  // 更新配色后重渲染图表即可
})

核心说明 #

饼图的分组总数等价于颜色编码对应字段的去重值数量，统计前需要先完成同分类的数据聚合，避免重复值导致计数错误。

内容的提问来源于stack exchange，提问作者noodles life