如何在Vega-Lite图表中设置Tooltip标题为字段值而非硬编码值

直接在Tooltip的title字段中写入数据属性名（如"xName"）只会显示字符串本身，无法获取对应的数据值。要实现动态将数据字段作为Tooltip标题，需要使用**表达式（expr）**来引用当前数据点的字段值，具体有两种常用方式：

方式一：在Tooltip字段配置中直接使用表达式 #

修改Tooltip的配置项，将title设置为包含expr的对象，通过datum.字段名获取当前数据点的对应值：

"tooltip": [
  {
    "field": "xToolTip",
    "title": {"expr": "datum.xName"}
  }
]

方式二：使用Tooltip的编码（encode）配置 #

如果需要更灵活地自定义Tooltip结构，可以通过encode分别定义标题和内容：

"tooltip": {
  "encode": {
    "title": {
      "text": {"expr": "datum.xName"}
    },
    "content": [
      {
        "type": "text",
        "text": {"expr": "datum.xToolTip"}
      }
    ]
  }
}

完整示例代码 #

以下是包含该配置的简单柱状图示例：

{
  "data": {
    "values": [
      {"xName": "产品A", "xToolTip": "销量100"},
      {"xName": "产品B", "xToolTip": "销量200"},
      {"xName": "产品C", "xToolTip": "销量150"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "xName", "type": "nominal"},
    "y": {"field": "xToolTip", "type": "quantitative"},
    "tooltip": [
      {
        "field": "xToolTip",
        "title": {"expr": "datum.xName"}
      }
    ]
  }
}

配置后，Tooltip的标题会动态显示对应数据点的xName字段值，而非固定字符串。

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