如何为Vega-Lite工具提示添加额外的z字段数据？

核心思路：匹配数据结构调整Tooltip配置 #

你遇到的问题大概率是Tooltip字段和数据结构不匹配导致的，以下是两种常见场景的解决方法：

场景1：数据是长表结构（用month字段区分本月/上月）

如果你的数据每条记录对应一个月份的类别数据（比如month字段值为本月/上月），可以通过condition来为不同月份的Tooltip绑定对应Z值：

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "month", "type": "nominal"},
    "tooltip": [
      {"field": "category", "title": "类别"},
      {"field": "month", "title": "时间"},
      {"field": "value", "title": "数值"},
      {
        "field": "z",
        "type": "quantitative",
        "title": "Z值",
        "condition": {"test": "datum.month === '本月'", "value": "datum.z"}
      },
      {
        "field": "z",
        "type": "quantitative",
        "title": "Z值",
        "condition": {"test": "datum.month === '上月'", "value": "datum.z"}
      }
    ]
  }
}

这种配置会根据当前数据点的month字段，在Tooltip中显示对应月份的Z值。

场景2：数据是宽表结构（本月/上月Z值为独立字段）

如果数据中直接有z_current（本月Z值）和z_last（上月Z值）这类独立字段，直接在Tooltip数组中添加对应字段即可：

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "current_value", "type": "quantitative"},
    "tooltip": [
      {"field": "category", "title": "类别"},
      {"field": "current_value", "title": "本月数值"},
      {"field": "z_current", "title": "本月Z值"},
      {"field": "last_value", "title": "上月数值"},
      {"field": "z_last", "title": "上月Z值"}
    ]
  }
}

补充：如果原始数据没有拆分Z值，用Transform生成

如果你的原始数据只有按月份存储的Z值，没有拆分成本月/上月字段，可以通过transform提前计算：

{
  "transform": [
    {"calculate": "datum.month === '2024-05' ? datum.z : null", "as": "current_z"},
    {"calculate": "datum.month === '2024-04' ? datum.z : null", "as": "last_z"}
  ],
  "mark": "bar",
  "encoding": {
    // 其他编码配置
    "tooltip": [
      {"field": "category", "title": "类别"},
      {"field": "current_z", "title": "本月Z值"},
      {"field": "last_z", "title": "上月Z值"}
    ]
  }
}

关键注意事项 #

• 字段名称严格匹配：确保field中的名称和数据中的字段完全一致，大小写敏感；
• 图层统一配置：如果用了layer组件，要么在每个子图层的tooltip中配置，要么在顶层设置tooltip: {"content": "data"}后再自定义字段；
• 格式优化：可以给Z值添加format参数控制显示精度，比如"format": ".2f"保留两位小数。

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