如何在Vega Lite时间序列X轴按年扩展1月刻度线并显示年月标签

以下是实现需求的完整配置，可直接运行：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "sequence": {
      "start": {"year": 2019, "month": 1},
      "stop": {"year": 2024, "month": 1},
      "step": [0, 1],
      "as": "date"
    },
    "transform": [
      {"calculate": "random() * 50 + 20", "as": "value"}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "axis": {
        // 指定仅在每年1月显示刻度与标签
        "values": [
          "2019-01-01", "2020-01-01", "2021-01-01", "2022-01-01", "2023-01-01"
        ],
        // 设置1月刻度线长度为普通刻度的3倍
        "tickSize": 15,
        // 标签显示年份与月份
        "format": "%Y年%m月",
        // 标签角度调整避免重叠
        "labelAngle": -45,
        // 确保刻度仅按年度间隔生成
        "tickCount": {"interval": "year", "step": 1},
        "grid": false
      }
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "axis": {"title": "数值"}
    }
  }
}

关键配置说明 #

• X轴刻度指定：通过axis.values手动设置每年1月1日的时间点，确保仅在年份变更节点生成刻度。
• 长刻度线：axis.tickSize设置为15（默认刻度线长度为5），突出显示年份分隔的刻度。
• 标签格式：axis.format使用%Y年%m月格式，让标签同时显示年份与月份信息。
• 数据适配：如果你的实际数据不是月度序列，只需调整data部分为你的数据源，确保时间字段格式符合标准即可。

若需要保留其他月份的短刻度（无标签），可通过添加辅助图层或调整轴线配置实现。

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