You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将Vega-Lite的step-after图表延伸至当前日期

如何将Vega-Lite的step-after图表延伸至当前日期

嗨,这个需求其实用Vega-Lite的内置变换就能轻松解决,不用手动修改原始数据~我给你两种实用的方案,你可以根据自己的场景选:

方案一:用window + append变换快速添加数据行

这个方法最直接,两步就能搞定:

  1. 先通过window变换获取数据集里的最后一个数值;
  2. append变换添加一行包含今日日期和最后数值的数据。

直接上示例代码,你可以替换成自己的数据源:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2023-01-01", "value": 10},
      {"date": "2023-02-01", "value": 15},
      {"date": "2023-03-01", "value": 20}
    ]
  },
  "transform": [
    // 计算整个数据集的最后一个value,存到last_value字段
    {"window": [{"field": "value", "op": "last", "as": "last_value"}], "frame": [null, null]},
    // 添加今日日期的新数据行,值沿用最后一个数值
    {"append": [{"date": {"expr": "today()"}, "value": {"expr": "datum.last_value"}}]}
  ],
  "mark": {"type": "line", "interpolate": "step-after"},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

关键细节解释:

  • window变换里的frame: [null, null]表示覆盖整个数据集,op: "last"会把最后一行的value同步到所有行的last_value字段;
  • append里的today()是Vega的内置表达式,会自动获取当前系统日期;如果需要指定日期格式,可以用formatDate(today(), '%Y-%m-%d')转换成字符串格式;
  • 这样生成的step-after图表,最后一段就会从原始数据的最后日期一直延伸到今天啦。

方案二:先聚合最后值,再合并数据集

如果你的数据量很大,或者需要更灵活的控制,可以先聚合出最后一个值,再把原始数据和新生成的单行数据合并:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2023-01-01", "value": 10},
      {"date": "2023-02-01", "value": 15},
      {"date": "2023-03-01", "value": 20}
    ]
  },
  "transform": [
    // 先把原始数据和聚合后的最后值数据合并
    {"union": [
      {"data": {"name": "source"}},
      {"data": {"name": "source"},
       "transform": [
         // 只保留最后一行数据
         {"window": [{"op": "row_number", "as": "row"}], "frame": [null, null]},
         {"filter": "datum.row == datum.row"},
         // 替换日期为今天
         {"calculate": "today()", "as": "date"}
       ]}
    ]}
  ],
  "mark": {"type": "line", "interpolate": "step-after"},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

这个方案通过union合并两个数据集:一个是原始数据,另一个是从原始数据中提取最后一行并替换日期为今天的单行数据,效果和方案一是一样的。

你可以根据自己的偏好选择,两种方法都能完美实现你要的“让最后一步延伸到今天”的效果~

备注:内容来源于stack exchange,提问作者timthoe

火山引擎 最新活动