如何在Deneb的Vega-Lite折线图中实现日期滑块？

完整修改代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "params": [
    {
      "name": "dateRange",
      "value": [null, null],
      "bind": {
        "input": "range",
        "type": "temporal",
        "min": {"expr": "extent(dataset, 'Date')[0]"},
        "max": {"expr": "extent(dataset, 'Date')[1]"},
        "step": 86400000,
        "name": "日期范围: "
      }
    }
  ],
  "transform": [
    {
      "filter": {
        "field": "Date",
        "range": {"param": "dateRange"}
      }
    }
  ],
  "title": {"text": {"expr": "data('dataset')[0]['title']"}},
  "mark": "line",
  "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Sum of Price", "type": "quantitative", "title": "Price"},
    "color": {
      "field": "Ticker",
      "type": "nominal",
      "scale": {
        "range": {"field": "Colour"}
      }
    },
    "strokeWidth": {"value": 2}
  },
  "config": {
    "view": {"stroke": "transparent"}
  }
}

关键修改说明 #

• 添加日期滑块参数：通过params定义dateRange参数，绑定时间范围滑块，自动读取数据集的日期边界（无需硬编码），按日步进调整范围。
• 数据过滤逻辑：新增transform模块，基于滑块选中的dateRange过滤数据，折线图仅展示符合范围的时序内容。

多图表共享滑块方案 #

如果页面包含多个图表，无需重复配置切片器，可选择以下两种方式：

• Power BI原生联动：添加一个Power BI原生日期范围切片器，绑定到Date字段，开启所有Deneb图表与该切片器的交互，实现全局日期过滤。
• Deneb多视图共享参数：若多个图表在同一个Deneb可视化中，将日期滑块参数定义在顶层，通过vconcat/hconcat组合视图，所有子图表自动共享该参数，无需重复配置。

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