Ag-Charts集成环境中自定义Tooltip渲染器无法正常显示问题

核心问题：键名不匹配导致undefined #

你看到的R$ undefined是因为datum[yKey]取不到值——从控制台打印的datum结构来看，数值对应的键是带完整前缀的salesOrders.avgWithDiscounts，而你的yKey大概率是配置成了avgWithDiscounts（不带前缀），两者不匹配所以返回undefined。

解决方法 #

方案1：确认yKey配置与datum键一致 #

检查你的图表配置中yKey的取值，确保它和datum里的键完全相同，即设置为salesOrders.avgWithDiscounts，这样原代码就能正常工作：

tooltip: {
  enabled: true,
  renderer({ datum, xKey, yKey }) {
    // 此时yKey的值是'salesOrders.avgWithDiscounts'，能正确取值
    const value = datum[yKey];
    return {
      title: value,
      content: `${value.toLocaleString('pt-BR', {
        style: 'currency',
        currency: 'BRL'
      })}`
    };
  }
}

方案2：直接使用完整键名取值 #

如果不想修改图表的yKey配置，可以跳过yKey参数，直接用datum['salesOrders.avgWithDiscounts']取值：

tooltip: {
  enabled: true,
  renderer({ datum }) {
    const value = datum['salesOrders.avgWithDiscounts'];
    return {
      title: value,
      content: `${value.toLocaleString('pt-BR', {
        style: 'currency',
        currency: 'BRL'
      })}`
    };
  }
}

排查小技巧 #

可以在renderer里打印xKey和yKey的实际值，确认是否和datum的键匹配：

renderer({ datum, xKey, yKey }) {
  console.log('当前xKey:', xKey, '当前yKey:', yKey);
  // 后续逻辑
}

关于数据聚合与__children的建议 #

• 你用aggFunc: 'sum'生成的__children是聚合前的原始细分数据，如果不需要在tooltip里展示这些子数据，完全可以忽略它，只使用顶层的聚合值即可。
• 如果需要在tooltip里同时展示总数据和明细，可以遍历__children拼接内容：

renderer({ datum }) {
  const totalValue = datum['salesOrders.avgWithDiscounts'];
  const detailContent = datum.__children.map(item => 
    `${item['salesOrders.paymentMethodName']}: ${item['salesOrders.avgWithDiscounts'].toLocaleString('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    })}`
  ).join('<br>');

  return {
    title: '总销售额',
    content: `${totalValue.toLocaleString('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    })}<br><br>明细：<br>${detailContent}`
  };
}

• 注意你的__children数组最后有个多余的逗号，虽然现代JS支持这种写法，但建议清理数据格式避免潜在问题。

内容的提问来源于stack exchange，提问作者Lucas Marra