如何在Vega-Lite工具提示中显示选择/计算数据？——解决选择区域价格差计算显示NaN及动态切换工具提示字段问题

一、为什么工具提示显示NaN？ #

大概率是你的价格差计算逻辑没有正确获取到选择范围内的有效数据值，常见原因有这几个：

• 误用选择的像素坐标而非数据值：如果你直接用priceRange.x0或priceRange.x1来计算，这些是画布上的像素位置，不是数据域里的价格/时间值，用它们做数值运算自然会得到NaN。
• 选择范围内无有效数据：如果拖选的区域没有覆盖任何数据点，或者只覆盖了单个点，计算时会出现undefined - undefined或undefined - 数值的情况，结果就是NaN。
• 字段名拼写错误：比如你的价格字段是price，但代码里写成了Price，导致无法读取有效数值。

二、正确计算价格差的步骤 #

1. 确保选择配置正确
   先确认你的interval选择是绑定到数据的x轴字段（比如时间或序列），示例配置：

"selection": {
  "priceRange": {
    "type": "interval",
    "encodings": ["x"] // 绑定到x轴的编码字段
  }
}

2. 定义信号获取选择数据并计算差价
   在Vega的signals里添加两个信号：一个过滤出选择范围内的数据，另一个计算价格差：

"signals": [
  {
    "name": "selectedData",
    "update": "filter('your_data_source_name', selection('priceRange'))" // 替换成你的数据源名称
  },
  {
    "name": "priceDiff",
    "update": "length(selectedData) > 1 ? (selectedData[length(selectedData)-1].price - selectedData[0].price) : null"
  }
]

这里的逻辑是：当选择范围内有至少2个数据点时，用最后一个点的价格减去第一个点的价格；否则返回null，避免NaN。

3. 调试验证
   可以加一个调试信号，在浏览器控制台查看数据：

{
  "name": "debugLog",
  "update": "console.log('选中数据:', selectedData, '价格差:', priceDiff)"
}

三、实现动态工具提示（未选显价格，选时显差价） #

直接在tooltip配置里用if判断选择状态，动态切换显示内容：

"tooltip": {
  "signal": "if(selection('priceRange'), { '价格差': format(priceDiff, '.2f') }, { '当前价格': format(datum.price, '.2f') })"
}

• 当用户拖选了区域（selection('priceRange')返回非空），显示格式化后的价格差；
• 未选择时，显示当前悬停数据点的价格。

额外注意事项 #

• 确保你的数据源名称和字段名完全匹配，比如your_data_source_name要和你在data里定义的名称一致；
• 如果你的x轴是时间类型，Vega会自动处理时间范围的过滤，不需要额外转换；
• 可以给价格差添加正负符号的显示，比如用format(priceDiff, '+,.2f')来突出涨跌。

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