求助：如何为Vega折线图开发指定样式的自定义Tooltip

实现思路 #

要实现你需要的自定义Tooltip样式，在Vega中可以通过自定义Tooltip内容模板+CSS样式定制来完成，完全匹配你给出的示例样式。

具体步骤 #

1. 配置Tooltip数据映射 #

在你的折线图mark配置里，给每个数据点绑定Tooltip内容。如果是多系列折线，确保能正确识别当前系列的字段：

"marks": [
  {
    "type": "line",
    "from": {"data": "your-dataset-name"},
    "encode": {
      "update": {
        // 保留原有折线视觉配置
        "tooltip": {
          "signal": "`
            <div class='custom-tooltip'>
              <div class='tooltip-title'>${datum.seriesName}</div>
              <div class='tooltip-row'>日期: ${datum.date}</div>
              <div class='tooltip-row'>数值: ${datum.value}</div>
            </div>
          `"
        }
      }
    }
  }
]

也可以在Vega顶层全局配置Tooltip：

"tooltip": {
  "content": "custom",
  "signal": "`<div class='custom-tooltip'>...</div>`"
}

2. 添加CSS样式匹配目标外观 #

直接在页面中插入以下CSS，完全复刻你需要的深色圆角Tooltip样式：

.custom-tooltip {
  background-color: #2d3748;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  font-family: system-ui, -apple-system, sans-serif;
}
.custom-tooltip .tooltip-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.custom-tooltip .tooltip-row {
  font-size: 13px;
  margin: 4px 0;
}

3. 适配现有规格注意事项 #

• 替换代码中的your-dataset-name、seriesName、date、value为你实际的数据字段名
• 如果使用Vega-Lite，可先通过tooltip: {fields: [...], titles: {...}}快速定义内容，再用CSS覆盖默认样式
• 确保Tooltip的信号表达式中，字段名与你的数据集中的字段完全一致

预期效果 #

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