Vega Lite滚动年度百分比计算及frame参数用法咨询

一、实现滚动年度雨天占非晴天比例统计 #

要实现悬浮某月份时展示过去12个月（前一年同月到当前月前一个月）的雨天占比，核心是用window transform定义滚动窗口，并结合聚合计算比例：

1. 先确保数据按日期升序排序，这是window正确计算滚动窗口的前提：

   {"sort": [{"field": "date"}]}
   

2. 用window计算滚动窗口内的雨天总数和非晴天总数。如果数据是按月聚合后的（每行对应一个月），frame: [-12, -1]表示取当前行之前的第12行到前1行（正好覆盖前一年同月到当前月前一个月）：

   {
     "window": [
       {"op": "sum", "field": "is_rainy", "as": "rolling_rainy", "frame": [-12, -1]},
       {"op": "sum", "field": "is_non_sunny", "as": "rolling_non_sunny", "frame": [-12, -1]}
     ]
   }
   

   若数据按天存储，把frame改成[-365, -1]即可（需确保无日期缺失，否则索引偏移会对应错误时间范围）。
3. 计算占比并配置tooltip展示：

   {"calculate": "datum.rolling_rainy / datum.rolling_non_sunny", "as": "rainy_ratio"}
   

   在tooltip中引用计算结果并格式化：

   "tooltip": [
     {"field": "month", "type": "temporal", "title": "统计截止月份"},
     {"field": "rainy_ratio", "type": "quantitative", "format": ".1%", "title": "雨天占非晴天比例"}
   ]
   

二、Vega Lite Window Transform 的 frame 参数详解 #

frame是二元数组[start, end]，以当前行为基准定义滚动窗口的行范围：

• start：窗口起始位置相对当前行的偏移，负数代表当前行之前的行，null表示从数据集第一行开始。
• end：窗口结束位置相对当前行的偏移，正数代表当前行之后的行，null表示到数据集最后一行结束。

常见用法示例：

• [null, 0]：从第一行到当前行（累积窗口）
• [-7, 0]：当前行及之前7行（过去7个周期，周期粒度取决于数据）
• [-12, -1]：当前行之前的12行到前1行（不含当前行，对应过去12个完整周期）

⚠️ 关键注意点：frame基于行索引偏移，必须确保数据已按目标维度（如时间）严格排序；若数据存在日期缺失，需先补全缺失值，否则索引偏移无法对应准确时间范围。

三、解决折线锯齿状问题（单X轴点多值） #

折线锯齿是因为同一X轴刻度（如某月份）对应多个Y值，导致折线频繁波动。解决核心是对每个X轴刻度做聚合计算，将多值合并为单值：

1. 按X轴时间单位（月/周等）分组，聚合Y值（常用均值、中位数或总和）：

   {
     "transform": [
       {"timeUnit": "month", "field": "date", "as": "month"},
       {"aggregate": [{"op": "mean", "field": "value", "as": "avg_value"}], "groupby": ["month"]}
     ]
   }
   

2. 用聚合后的字段（如avg_value）绘制折线，每个X轴刻度仅对应一个值，折线自然平滑。

若数据已按时间单位分组但仍有多个值，检查是否分组维度不足（如同一月份包含不同地区数据），需补充groupby字段确保每个分组唯一对应一个X轴点。

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