AmCharts 5如何为X轴Tooltip添加自定义数据字段？

现有X轴及X轴渲染器代码如下：

let xRenderer = amChartXY.AxisRendererX.new(root, {minGridDistance: 30});
xRenderer.labels.template.setAll({
    rotation: -45,
    oversizedBehavior: "truncate",
    maxWidth: 130,
    ellipsis: "...",
    fontSize: 12,
    fontWeight: "400",
    centerY: amChart.p50,
    centerX: amChart.p100,
    spaddingRight: 15,
    tooltipText: "{category}",
});

let xAxis = chart.xAxes.push(amChartXY.CategoryAxis.new(root, {
    maxDeviation: 0.6,
    categoryField: "name",
    renderer: xRenderer,
    tooltip: amChart.Tooltip.new(root, {})
}));

当前X轴Tooltip仅显示category对应的name字段，需要修改为显示格式「name + job」（每个数据项含独有job字段）。

尝试过以下修改，但获取到的text始终为"{category}"：

let xTooltip = xAxis.get("tooltip");

xTooltip.label.adapters.add("text", function(text, target) {
    return text + " TEST";
});

解决方案 #

方法一：直接修改Tooltip模板字符串 #

最简单的方式是直接修改xRenderer.labels.template的tooltipText，直接引用数据中的job字段：

xRenderer.labels.template.setAll({
    // 保留原有配置项
    rotation: -45,
    oversizedBehavior: "truncate",
    maxWidth: 130,
    ellipsis: "...",
    fontSize: 12,
    fontWeight: "400",
    centerY: amChart.p50,
    centerX: amChart.p100,
    spaddingRight: 15,
    // 修改tooltipText模板
    tooltipText: "{category} {job}",
});

因为categoryField设置为"name"，{category}会自动映射到数据的name字段，模板支持直接引用数据源中的其他字段（如job），无需额外逻辑处理。

方法二：通过Adapter获取实际数据项 #

如果需要动态拼接文本（比如添加判断逻辑），需注意：Adapter触发时模板尚未解析，所以text是原始的"{category}"，需从target的dataContext中读取实际数据源对象：

let xTooltip = xAxis.get("tooltip");

xTooltip.label.adapters.add("text", function(text, target) {
    // 获取轴数据项对应的原始数据源
    const rawData = target.dataContext?.dataContext;
    if (rawData) {
        return `${rawData.name} ${rawData.job}`;
    }
    // 无数据时返回原文本兜底
    return text;
});

这里target.dataContext是轴的内置数据项对象，其dataContext属性指向你传入的原始数据源对象，从中可以直接读取name和job字段进行自定义拼接。

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