Vega Lite堆叠条形图Text Mark的Tooltip复用方案问询

方法1：抽离共享Tooltip配置 #

把自定义Tooltip的内容定义成可复用的对象，在Bar和Text两个标记中直接引用，避免重复编写相同的配置代码。

如果是在JavaScript环境中使用Vega Lite，可将Tooltip配置抽成变量后在两个标记里调用：

// 抽离共享的Tooltip配置
const sharedTooltip = [
  {"field": "gender", "type": "nominal", "title": "性别"},
  // 复杂场景下可添加更多字段
  {"field": "age", "type": "ordinal", "title": "年龄段"},
  {"field": "people", "type": "quantitative", "title": "人口占比", "format": ".1%"}
];

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "encoding": {
    "x": {"field": "age", "type": "ordinal"},
    "y": {"field": "people", "type": "quantitative", "stack": "normalize"},
    "color": {"field": "gender", "type": "nominal"}
  },
  "layer": [
    // Bar标记引用共享Tooltip
    {"mark": "bar", "tooltip": sharedTooltip},
    {
      "mark": {"type": "text", "align": "center", "baseline": "middle"},
      "encoding": {
        "text": {"field": "people", "type": "quantitative", "format": ".1%"},
        // Text标记同样引用共享Tooltip
        "tooltip": sharedTooltip
      }
    }
  ]
};

如果是纯JSON场景，可直接复制相同的Tooltip配置数组到两个标记中，或在支持$ref的环境下使用JSON Schema引用实现复用。

方法2：全局Tooltip配置（全图统一时适用） #

如果整个图表的Tooltip内容和样式完全一致，可在config字段中定义全局Tooltip规则，所有标记会自动继承该配置，无需单独编写：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "config": {
    "tooltip": {
      "content": "custom",
      "fields": [
        {"field": "gender", "title": "性别"}
      ]
    }
  },
  "encoding": {
    "x": {"field": "age", "type": "ordinal"},
    "y": {"field": "people", "type": "quantitative", "stack": "normalize"},
    "color": {"field": "gender", "type": "nominal"}
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {"type": "text", "align": "center", "baseline": "middle"},
      "encoding": {
        "text": {"field": "people", "type": "quantitative", "format": ".1%"}
      }
    }
  ]
}

注意：若某个标记需要自定义Tooltip，单独编写的标记级Tooltip会覆盖全局配置。

可复用的场景与实现方式 #

• 配置抽离：对于重复的配置片段（如Tooltip、坐标轴样式、图例规则），JS环境中可抽成变量，静态JSON中可使用$ref引用（需环境支持）。
• 全局Config：将通用样式、交互规则放在config字段中，所有图表元素自动继承，减少重复代码。
• 顶层共享配置：使用layer、repeat、concat组合图表时，把共享的transform、encoding放在顶层，子层只定义差异部分（如标记类型、额外字段）。
• 参数共享：用params定义交互参数（如筛选条件、高亮规则），多个标记可绑定同一参数，实现交互逻辑复用。

必须重复编写的场景 #

• 差异化配置：当不同标记需要不同的视觉属性（如形状、大小、颜色映射）或交互逻辑时，必须单独定义对应的配置。
• 局部覆盖：如果某个标记需要偏离全局Config的设置，必须单独编写该标记的配置来覆盖全局规则。
• 独立数据源组件：如果子层使用独立的数据源，其transform、encoding无法与其他层共享，需要单独编写。

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