基于非整点时段数据生成每日计数柱状图的Vega-Lite实现问题

数据说明 #

现有一组非整点采集的事件累计计数数据：

time,counts
2023-10-21 19:30,4936
2023-10-22 22:24,4950
2023-10-23 23:07,4966
2023-10-25 03:44,4981

需求目标 #

编写Vega-Lite规范生成柱状图，估算每日事件计数：

• 已知2023-10-22的计数约为14
• 缺失数据的日期（如2023-10-24）需通过相邻数据点推断，估算值约为13

当前问题 #

已通过窗口函数将累计计数转换为差值，但未实现每日计数的时间比例分配逻辑；同时存在兼容性问题：

• 桌面版Firefox可正常显示
• Android Firefox、iPhone Safari无法显示
• Android Chrome可显示，但在旧版本Vega/Vega-Lite环境下失效

一、实现每日计数估算逻辑 #

核心思路是根据相邻数据点的时间差与计数差，按时间占比将计数分配到对应日期，最终聚合每日的分配值得到估算结果。以下是修正后的Vega-Lite规范：

var vlSpec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
  data: { url: "/counts.csv" },
  transform: [
    // 获取下一个数据点的时间和计数
    {
      window: [
        { op: "lead", field: "time", as: "next_time" },
        { op: "lead", field: "counts", as: "next_counts" }
      ]
    },
    // 过滤最后一个无后续数据的点
    { filter: "isValid(datum.next_time)" },
    // 计算时间差（毫秒）和计数差
    {
      calculate: "datetime(datum.next_time) - datetime(datum.time)",
      as: "time_diff"
    },
    { calculate: "datum.next_counts - datum.counts", as: "count_diff" },
    // 生成当前时间到下一个时间之间的所有日期序列
    {
      sequence: {
        start: "datetime(datum.time)",
        stop: "datetime(datum.next_time)",
        step: 86400000, // 一天的毫秒数
        as: "day"
      }
    },
    // 展开日期序列
    { flatten: ["day"] },
    // 计算每个日期在时间区间内的有效时长（毫秒）
    {
      calculate: "min(datetime(datum.next_time), datum.day + 86400000) - max(datetime(datum.time), datum.day)",
      as: "day_duration"
    },
    // 按时间占比分配计数
    {
      calculate: "(datum.day_duration / datum.time_diff) * datum.count_diff",
      as: "daily_estimate"
    },
    // 按日期聚合估算值，四舍五入为整数
    {
      aggregate: [
        { op: "sum", field: "daily_estimate", as: "total_daily" }
      ],
      groupby: ["day"]
    },
    { calculate: "round(datum.total_daily)", as: "daily_counts" }
  ],
  encoding: {
    y: {
      field: "day",
      type: "ordinal",
      title: "日期",
      timeUnit: "yearmonthdate"
    },
    x: {
      field: "daily_counts",
      type: "quantitative",
      title: "每日估算计数"
    }
  },
  layer: [
    { mark: "bar" },
    {
      mark: {
        type: "text",
        align: "left",
        baseline: "middle",
        dx: 3
      },
      encoding: {
        text: { field: "daily_counts", type: "quantitative" }
      }
    }
  ]
};

关键步骤说明：

1. 窗口函数：获取每个数据点的下一个时间和计数，用于计算区间差值
2. 日期序列生成：通过sequence生成区间内的所有日期，再用flatten展开
3. 时间占比计算：统计每个日期在区间内的实际时长，按比例分配计数差
4. 聚合求和：将同一日期的分配值求和并取整，得到最终每日估算值

二、修复兼容性问题 #

针对移动端和旧版本Vega/Vega-Lite的兼容问题，做以下调整：

1. 替换时间单位：将binnedyearmonthdate改为yearmonthdate，该单位在新旧版本及移动端浏览器中兼容性更好
2. 修正语法细节：移除Mark属性末尾的多余逗号（如原代码中dx: 3,的逗号），避免旧版JS解析报错
3. 版本兼容建议：若需兼容旧版Vega-Lite，可将$schema改为v4版本（https://vega.github.io/schema/vega-lite/v4.json），同时调整对应语法差异
4. 资源路径检查：确保CSV文件路径在移动端可正常访问，避免跨域或路径错误导致加载失败

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