AmCharts5 中自定义 Tooltip 文本格式的完整实现指南-js教程-PHP中文网

AmCharts5 中自定义 Tooltip 文本格式的完整实现指南

在 AmCharts5 中，无法直接在 labelText 模板中执行 JavaScript 表达式（如 {Math.abs(valueY)}），但可通过 adapters 或 formatter 灵活实现任意数值格式化逻辑，包括绝对值、倍数运算或自定义函数处理。

在 amcharts5 中，无法直接在 `labeltext` 模板中执行 javascript 表达式（如 `{math.abs(valuey)}`），但可通过 `adapters` 或 `formatter` 灵活实现任意数值格式化逻辑，包括绝对值、倍数运算或自定义函数处理。

AmCharts5 的 tooltip 文本渲染机制与 v4 有显著区别：它不支持模板内嵌入 JS 表达式（如 {2 * valueY} 或 {customFunction(valueY)}），所有动态计算必须通过外部逻辑完成。官方推荐两种可靠方案——formatter（适用于简单数值转换）和 adapters（适用于复杂上下文访问与多字段组合）。

✅ 方案一：使用 formatter 进行基础数值格式化

当只需对 valueY 单一数值做数学变换（如取绝对值、乘法、单位添加）时，formatter 是最简洁的选择。注意：formatter 函数接收原始数值（非对象），且仅作用于 valueY 字段：

var series2 = chart.series.push(
  am5xy.LineSeries.new(root, {
    name: "Expenses",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "expenses",
    categoryXField: "year",
    tooltip: am5.Tooltip.new(root, {
      pointerOrientation: "horizontal",
      // formatter 接收 valueY 原始值，返回格式化后的字符串
      formatter: function(value) {
        return Math.abs(value) + " $"; // 示例：绝对值 + 单位
      }
    }),
    tooltipText: "{name}: {valueY}" // 此处 {valueY} 仅作占位，实际由 formatter 覆盖
  })
);

⚠️ 注意：tooltipText 中的 {valueY} 不会自动格式化，其作用仅为触发 tooltip 显示；真正生效的是 formatter 返回值。若需显示其他字段（如 {categoryX}），formatter 无法访问——此时需用方案二。

讯飞智文
一款面向学习和办公场景的AI文档创作工具，可辅助生成PPT与Word文档，提高资料整理和内容制作效率。

下载

✅ 方案二：使用 adapters 实现全字段动态定制

当需要组合多个数据字段（如 {name}、{categoryX}、{valueY}）、调用自定义函数或执行条件逻辑时，adapters 是唯一推荐方式。它直接劫持 tooltip 标签的 text 属性，提供完整的上下文访问能力：

// 定义你的自定义格式化函数
function customFun(value) {
  if (value === null || value === undefined) return "—";
  return (value * 2).toFixed(2); // 示例：2 倍并保留两位小数
}

// 为 tooltip 的 label 绑定 text adapter
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 year = dataItem.get("categoryX") || "";
  const expenses = dataItem.get("valueY");

  return `${name} in ${year}: $${customFun(expenses)}`;
});

此方案优势明显：