Vegalite:饼图不聚合在一起

Vegalite: pie chart not aggregating together

我有一个 json 日期值,我要添加到 vega-lite 以在饼图中可视化。图例似乎正确呈现(2020 年第 3 季度和 2020 年第 4 季度有 2 个不同的图例)。但饼图本身似乎并没有聚集在一起。我如何确保所有 2020Q4 都组合在一起?我该如何修复我的规格?? pie chart with no aggregation for same data

{
    "$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": 500
        },
        "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": "color",
                    "title": "Due date",
                    "type": "nominal",
                    "timeUnit": "yearquarter"
                }
            }
        }
    ],
    "encoding": {
        "color": {
            "field": "color",
                    "title": "Due date",
                    "type": "nominal",
                    "timeUnit": "yearquarter"
        },
        "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, datum.color.date)",
            "as": "color"
        },
        {
            "joinaggregate": [
                {
                    "op": "count",
                    "field": "theta",
                    "as": "thetaAggregated"
                }
            ],
            "groupby": [
                "color"
            ]
        }
    ],
    "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"
            }
        ]
    }
}

您可以使用 aggregate 转换代替 joinaggregate,因为它会帮助您生成可用于值饼图的新数据集。只需使用计算和表达式转换颜色值,然后执行聚合。

以下是代码片段或参考editor:

{
  "$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": 500
    },
    "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",
        "stroke": "#666666",
        "radius": {"expr": "min(width,height)/4+min(width,height)/5/2"},
        "limit": {"expr": "min(width,height)/5"}
      },
      "encoding": {
        "text": {"field": "quarterTime", "title": "Due date", "type": "nominal"}
      }
    }
  ],
  "encoding": {
    "color": {"field": "quarterTime", "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, datum.color.date)",
      "as": "color"
    },
    {"calculate": "timeFormat(datum.color,'%Y Q%q')", "as": "quarterTime"},
    {
      "aggregate": [{"op": "count", "field": "theta", "as": "thetaAggregated"}],
      "groupby": ["quarterTime"]
    }
  ],
  "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"
      }
    ]
  }
}