首页 > 网页制作 >AmCharts 5 自定义 Tooltip 显示格式完整指南

AmCharts 5 自定义 Tooltip 显示格式完整指南

来源：互联网 2026-07-21 08:09:13

AmCharts5中tooltip的labelText不支持内联函数或表达式，必须通过adapters或formatter实现动态格式化。对于多字段组合等复杂逻辑，推荐使用tooltip.label.adapters.add("text")；而简单数值转换则用tooltip.formatter更合适。注意两者适用场景不同。

在 AmCharts 5 中，无法直接在 labelText 模板字符串中调用 JavaScript 函数（如 {Math.abs(valueY)}），必须通过 adapters 或 formatter 实现动态格式化，本文详解两种推荐方案及最佳实践。

先说明结论：AmCharts 5 的 tooltip 文本渲染机制与 v4 版本存在较大差异。一个关键限制在于——labelText 仅支持静态占位符，例如 {name}、{valueY}，但嵌入内联表达式或直接调用函数（如 {Math.abs(valueY)}）无法生效。如果需要对数值执行绝对值计算、倍数变换、货币格式化或调用自定义逻辑，必须借助底层扩展机制：adapters 或 formatter。

推荐方案一：使用 tooltip.label.adapters.add("text", ...)（最灵活、最常用）

adapters 方案是官方推荐且功能最强的做法，适用于各种复杂逻辑。核心思路是：在 tooltip 文本实际渲染前进行拦截，然后手动改写内容。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

// 假设已定义自定义格式化函数
function customFun(value) {
  if (value == null) return "—";
  return Math.round(value * 100) / 100; // 保留两位小数
}

// 在 series 配置后，为 tooltip label 添加适配器
series2.get("tooltip").label.adapters.add("text", function(text, target) {
  const dataItem = series2.get("tooltipDataItem");
  if (!dataItem) return text;
  const name = series2.get("name") || "";
  const valueY = dataItem.get("valueY");
  const formattedValue = customFun(valueY);
  return `${name}: $${formattedValue}`;
});

需要关注的几个关键点：

tooltipDataItem 是当前悬停数据点的完整 DataItem 对象，通过它可以获取原始字段，例如 .get("valueY")、.get("categoryX")。
target 是 tooltip 内部的 Label 实例，text 通常是默认的占位符文本，多数情况下为空，可以忽略。
适配器内部必须显式返回一个字符串，否则 tooltip 将显示为空。
每次 tooltip 显示时都会触发该方法，性能开销较低，实时计算完全可行。

推荐方案二：使用 tooltip.formatter（仅限简单数值转换）

如果仅对 valueY 进行轻量级处理，例如取绝对值、乘以系数或添加单位符号，formatter 方案更为简洁。

tooltip: am5.Tooltip.new(root, {
  pointerOrientation: "horizontal",
  formatter: function(value, info) {
    // value 是当前数据点的 valueY 值
    // info 包含上下文（如 dataItem、field、axis 等），但通常无需使用
    return Math.abs(value) + " $";
  }
}),
tooltipText: "{name}: {valueY}" // 这里的占位符仅用于触发 tooltip 显示，实际文本由 formatter 决定

需要说明的是，formatter 仅接收 value（即 valueY 字段值）和 info 对象，不会提供系列名称、类别等上下文信息。因此它仅适用于纯数值加工的简单场景。如果需要将多个字段组合在一起，例如“{name} in {categoryX}: $...”，则仍需使用 adapters 方案。

总结与最佳实践

场景	推荐方案	说明
仅格式化 valueY（如加单位、取整、绝对值）	formatter	代码简短，语义清晰
需组合多个字段（{name}、{categoryX}、{valueY}）或调用复杂逻辑	label.adapters.add("text", ...)	完全可控，是 AmCharts 5 的标准扩展方式
需全局统一格式（如所有 tooltip 统一货币符号）	在 root 或 chart 级配置 NumberFormatter	适用于基础数字格式（千分位、小数位），但不支持自定义函数

最后再次提醒：不要在 labelText 中尝试编写 {Math.abs(valueY)} 或 {customFunction(valueY)}——这种写法在 v5 中无效，结果要么占位符原样输出，要么直接报错。坚持“模板占位符 + 适配器/格式器”的分离原则，才能实现灵活且可靠的 tooltip 定制。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述