使用Vega Lite展示日期范围首尾时段的筛查百分比

一、保留首尾日期的百分比数据：window vs joinaggregate #

1. 使用window实现 #

适合需要给全量数据添加上首尾标记后再过滤的场景，示例代码：

// 假设数据字段为date（日期）、visit_count（就诊量）、screening_rate（筛查百分比）
window: {
  first_date: { field: 'date', op: 'min' },
  last_date: { field: 'date', op: 'max' },
  first_rate: { field: 'screening_rate', op: 'min', frame: [null, null] }, // 对应最早日期的百分比
  last_rate: { field: 'screening_rate', op: 'max', frame: [null, null] }  // 对应最晚日期的百分比
},
transform: [
  {
    filter: 'datum.date === datum.first_date || datum.date === datum.last_date'
  },
  // 去重，避免同一日期多条数据导致重复点
  { deduplicate: ['date'] }
]

注意设置frame: [null, null]确保窗口覆盖整个数据集，deduplicate处理重复数据问题。

2. 使用joinaggregate实现 #

适合单独提取首尾聚合值再和原数据关联的场景，性能更轻量化：

transform: [
  {
    joinaggregate: [
      { op: 'min', field: 'date', as: 'first_date' },
      { op: 'max', field: 'date', as: 'last_date' }
    ],
    groupby: [] // 全局聚合，有分组需求时添加对应分组字段
  },
  {
    lookup: 'date',
    from: {
      data: your_data_source,
      transform: [{ type: 'project', fields: ['date', 'screening_rate'] }]
    },
    as: 'rate_info'
  },
  { filter: 'datum.date === datum.first_date || datum.date === datum.last_date' },
  { flatten: ['rate_info'] },
  { project: ['date', 'screening_rate', 'visit_count'] }
]

这种方式直接聚合出首尾日期，再关联对应百分比，避免全量数据开窗的性能消耗。

二、NaN值排查要点 #

NaN通常由以下原因导致，逐一排查：

• 日期解析错误：确保date字段被正确解析为时间类型，比如在数据源配置中添加parse: { field: 'date', format: '%Y-%m-%d' }。
• 字段匹配错误：检查screening_rate字段名是否与数据源完全一致，避免拼写错误。
• 聚合逻辑问题：若screening_rate存在空值，聚合时用coalesce填充默认值，比如expr: 'coalesce(screening_rate, 0)'。
• 过滤条件错误：检查日期比较逻辑，确保日期是Date类型而非字符串，避免因类型不匹配过滤掉有效数据。

三、可视化实现 #

1. 就诊量单调折线图 #

基于原数据配置折线层，指定monotone类型：

{
  type: 'line',
  data: your_visit_data,
  encode: {
    x: 'date',
    y: 'visit_count'
  },
  style: {
    lineType: 'monotone' // 启用单调折线
  }
}

2. 首尾日期百分比数据点 #

基于处理后的首尾数据配置点层：

{
  type: 'point',
  data: filtered_rate_data, // 前面处理得到的首尾数据
  encode: {
    x: 'date',
    y: 'screening_rate'
  },
  style: {
    size: 8,
    fill: '#ff4d4f',
    stroke: '#fff'
  },
  label: {
    text: 'screening_rate',
    format: '.1%' // 百分比格式化展示
  }
}

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