Vega-Lite饼图相同季度数据未聚合如何修改spec配置

问题根因 #

你当前的配置仅在颜色、文本的渲染配置（encoding）中添加了timeUnit: yearquarter参数，这个配置仅影响图例、标签的展示逻辑，不会作用于数据聚合步骤。你在transform的joinaggregate中是按精确到毫秒的完整日期时间字段分组统计，所以同一个季度的不同日期会被拆分成多个独立分组，导致饼图出现多个同色小扇区。

修复方案 #

核心调整逻辑是先将日期按年季度维度格式化，再基于格式化后的季度字段做聚合，具体修改点如下：

• 在transform中新增步骤，将转换好的日期时间字段按年季度维度输出为新字段quarter
• 将joinaggregate的分组字段从精确日期时间改为quarter
• 编码配置（encoding）中的颜色、文本字段统一使用quarter，无需重复声明timeUnit
• 注意：JavaScript Date对象的月份为0索引，若你的原始数据中month字段是1索引（即9代表9月），需要在datetime计算时减1，避免季度计算偏移

修复后完整spec配置 #

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 880,
    "height": 376,
    "config": {
        "range": {
            "category": {
                "scheme": "tableau20"
            }
        },
        "legend": {
            "labelColor": "#333",
            "labelFontSize": 11,
            "symbolSize": 30,
            "symbolType": "circle",
            "symbolStrokeWidth": 0,
            "titleColor": "#333",
            "titleFontSize": 14,
            "titlePadding": 10,
            "titleFontWeight": 50
        },
        "autosize": {
            "type": "fit",
            "contains": "padding"
        },
        "font": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
        "axisLeft": {
            "labelFontSize": 14,
            "labelColor": "#333",
            "labelLimit": 180,
            "titleFontSize": 16,
            "titleLimit": 180
        },
        "style": {
            "label": {
                "align": "left",
                "baseline": "middle",
                "dx": 4
            },
            "cell": {
                "stroke": "transparent"
            }
        }
    },
    "layer": [
        {
            "mark": {
                "type": "arc",
                "innerRadius": {
                    "expr": "min(width,height)/5"
                },
                "outerRadius": {
                    "expr": "min(width,height)/4"
                },
                "tooltip": true,
                "padAngle": 0.01
            },
            "params": [
                {
                    "name": "highlight",
                    "select": {
                        "type": "point",
                        "on": "mouseover"
                    }
                },
                {
                    "name": "select",
                    "select": "point"
                }
            ]
        },
        {
            "mark": {
                "type": "text",
                "radius": {
                    "expr": "min(width,height)/4+min(width,height)/5/2"
                },
                "stroke": "#666666",
                "limit": {
                    "expr": "min(width,height)/5"
                }
            },
            "encoding": {
                "text": {
                    "field": "quarter",
                    "title": "Due date",
                    "type": "nominal"
                }
            }
        }
    ],
    "encoding": {
        "color": {
            "field": "quarter",
                    "title": "Due date",
                    "type": "nominal"
        },
        "theta": {
            "field": "thetaAggregated",
            "type": "quantitative",
            "title": "Values",
            "stack": true
        },
        "fillOpacity": {
            "condition": [
                {
                    "param": "select",
                    "value": 1
                }
            ],
            "value": 0.3
        }
    },
    "transform": [
        {
            "calculate": "datetime(datum.color.year, datum.color.month - 1, datum.color.date)",
            "as": "date"
        },
        {
            "timeUnit": "yearquarter",
            "field": "date",
            "as": "quarter"
        },
        {
            "joinaggregate": [
                {
                    "op": "count",
                    "field": "theta",
                    "as": "thetaAggregated"
                }
            ],
            "groupby": [
                "quarter"
            ]
        }
    ],
    "data": {
        "values": [
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 30,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "rec79Wjae6P45XNpl"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 20,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recrQaNcIH4wueWrT"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 8,
                    "date": 29,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recwVzB5CNu0E6x9J"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 25,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recp8FrOTOgSqQlxV"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 5,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recpgd5QYGyHPz6oC"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 10,
                    "date": 7,
                    "hours": 16,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recerFXuq7ply21Ba"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 18,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recNfz0B2qasVXfwS"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 12,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recriiVtRVuueAwTP"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 19,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recbGumPg7L28cUrh"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 26,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recrhgU6BXOBYY8F4"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 31,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recJzAP0NPlzck0aa"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 32,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "rec2spYZGJTOnq32F"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 17,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recldmzqvJhcZ9oqy"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 25,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recegvuNEeNoSyyMT"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 4,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recDwkAeTWQ9KzDXS"
            },
            {
                "color": {
                    "year": 2020,
                    "month": 9,
                    "date": 9,
                    "hours": 17,
                    "minutes": 0,
                    "seconds": 0,
                    "milliseconds": 0
                },
                "theta": "recKTwDYDpXsKAiAC"
            }
        ]
    }
}

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