如何基于字段实现条件式Tooltip（提示框）？

问题背景 #

我有一个包含多种交易类型（CASH、INV、CM等）的时间线图表，每种交易类型对应不同的关联元数据，希望在Tooltip中展示这些元数据，即基于trx_type字段实现条件式Tooltip。

已知简单Tooltip的条件配置方式：

{"tooltip": {
   "condition": {
     "test": "(datum['trx_type'] !== 'CASH')",
     "field": "trx_type",
     "type": "nominal"
   },
   "value": "N/A"
 },
}

但不清楚如何在多字段的复杂Tooltip配置中实现该功能，当前复杂配置如下：

{"tooltip": [
   {
      "field": "trx_unixtime",
      "title": "Event Date",
      "type": "nominal",
      "timeUnit": "yearmonthdate"
   },
   {
      "field": "trx_type",
      "title": "Transaction Type"
   },
   {
      "field": "trx_count",
      "title": "# Transactions",
      "type": "quantitative",
      "format": ",.0f"
   }
]
}

解决方案 #

方法1：为单个Tooltip字段添加条件控制 #

如果只是部分字段需要根据trx_type显示/隐藏，可以给每个需要条件控制的Tooltip条目单独添加condition配置，满足条件时才会显示该字段：

{
  "tooltip": [
    // 所有交易类型都显示的基础字段
    {
      "field": "trx_unixtime",
      "title": "Event Date",
      "type": "nominal",
      "timeUnit": "yearmonthdate"
    },
    {
      "field": "trx_type",
      "title": "Transaction Type"
    },
    {
      "field": "trx_count",
      "title": "# Transactions",
      "type": "quantitative",
      "format": ",.0f"
    },
    // 仅CASH类型显示的专属字段
    {
      "condition": {
        "test": "datum['trx_type'] === 'CASH'",
        "field": "cash_amount",
        "title": "Cash Amount",
        "type": "quantitative",
        "format": "$,.2f"
      }
    },
    // 仅INV类型显示的专属字段
    {
      "condition": {
        "test": "datum['trx_type'] === 'INV'",
        "field": "inv_value",
        "title": "Investment Value",
        "type": "quantitative",
        "format": "$,.2f"
      }
    },
    // 仅CM类型显示的专属字段
    {
      "condition": {
        "test": "datum['trx_type'] === 'CM'",
        "field": "cm_fee",
        "title": "Commission Fee",
        "type": "quantitative",
        "format": "$,.2f"
      }
    }
  ]
}

说明：condition中的test是基于当前数据对象（datum）的表达式，返回true时该字段会出现在Tooltip中，返回false则自动忽略该条目。

方法2：按交易类型切换整个Tooltip字段集合 #

如果不同交易类型的Tooltip字段差异很大，可以通过顶层的condition配置，直接切换整个Tooltip的字段列表：

{
  "tooltip": {
    // CASH类型对应的Tooltip字段
    "condition": {
      "test": "datum['trx_type'] === 'CASH'",
      "value": [
        {"field": "trx_unixtime", "title": "Event Date", "type": "nominal", "timeUnit": "yearmonthdate"},
        {"field": "trx_type", "title": "Transaction Type"},
        {"field": "trx_count", "title": "# Transactions", "type": "quantitative", "format": ",.0f"},
        {"field": "cash_amount", "title": "Cash Amount", "type": "quantitative", "format": "$,.2f"}
      ]
    },
    // INV类型对应的Tooltip字段
    "else": {
      "condition": {
        "test": "datum['trx_type'] === 'INV'",
        "value": [
          {"field": "trx_unixtime", "title": "Event Date", "type": "nominal", "timeUnit": "yearmonthdate"},
          {"field": "trx_type", "title": "Transaction Type"},
          {"field": "trx_count", "title": "# Transactions", "type": "quantitative", "format": ",.0f"},
          {"field": "inv_value", "title": "Investment Value", "type": "quantitative", "format": "$,.2f"},
          {"field": "inv_term", "title": "Investment Term", "type": "ordinal"}
        ]
      },
      // 默认类型（如CM）对应的Tooltip字段
      "else": [
        {"field": "trx_unixtime", "title": "Event Date", "type": "nominal", "timeUnit": "yearmonthdate"},
        {"field": "trx_type", "title": "Transaction Type"},
        {"field": "trx_count", "title": "# Transactions", "type": "quantitative", "format": ",.0f"},
        {"field": "cm_fee", "title": "Commission Fee", "type": "quantitative", "format": "$,.2f"}
      ]
    }
  }
}

说明：这种方式可以为每种交易类型定义完全独立的Tooltip字段集合，适合不同类型的元数据差异较大的场景。

注意事项 #

• 表达式中的datum['trx_type']也可以简写为datum.trx_type，两种写法等效；
• 可以根据需求自由组合两种方法，比如基础字段全局显示，专属字段按条件添加；
• 确保test表达式的逻辑符合业务需求，比如用===精确匹配字符串类型的交易类型。

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