Vega Lite绘制24小时智能体状态转换图故障求助

问题根源 #

你给x轴添加的scale.domain用了{"hours": 0}这种时间对象格式，但在指定timeUnit: "hours"后，Vega-Lite会把原始时间字段转换成0到23之间的小时数值（比如23:59对应23.98左右）。用时间对象作为域值会导致数据映射完全错位，进而破坏可视化效果。

修复代码 #

把x轴编码里的scale.domain改成纯数值范围[0, 24]就行，调整后的代码片段：

"x": {
  "field": "timestamp",
  "type": "temporal",
  "timeUnit": "hours",
  "scale": {"domain": [0, 24]},
  "axis": {"title": "时间（小时）"}
}

补充说明 #

• 如果不想用timeUnit，也可以直接基于完整时间戳设置域，用ISO格式的字符串就行，比如：

  "x": {
    "field": "timestamp",
    "type": "temporal",
    "scale": {"domain": ["2023-01-01T00:00:00", "2023-01-02T00:00:00"]},
    "axis": {"title": "时间", "format": "%H:%M"}
  }
  

  这种方式不需要timeUnit，轴上的时间格式可以通过axis.format自定义。

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