AG Grid饼图故障排查：图例键（legendKey）不一致问题求助

问题背景 #

我需要在AG Grid饼图的calloutLabel中显示格式化后的货币值，让用户无需悬停就能查看。通过以下代码实现需求后：

return `${useCurrencySymbol(params.datum[params.angleKey]).value}`;

发现legendKey自动变成了和calloutLabelKey一致的货币值。AG Grid Integrated Charts文档未明确说明如何独立控制这两个属性，特此求助。

测试步骤 #

• 取消注释图例相关代码，查看控制台与图例显示效果
• 注释calloutLabel相关代码，重新查看图例表现

解决方案 #

要实现calloutLabel（标注文本）和legendKey（图例文本）的独立控制，可通过以下两种方式处理：

方法1：为图例单独配置格式化函数 #

在createRangeChart的配置项中，通过legendOptions.formatter强制图例使用原始分类文本，不受calloutLabel格式化逻辑影响：

legendOptions: {
  formatter: (params) => {
    // 返回原始的分类名称，而非格式化后的货币值
    return params.datum[params.categoryKey];
  }
}

方法2：保持字段关联逻辑，仅在calloutLabel中做格式化 #

不要修改angleKey的关联值，仅在calloutLabel的格式化函数中处理货币显示，让图例默认使用原始分类字段：

calloutLabel: {
  formatter: (params) => {
    return `${useCurrencySymbol(params.datum[params.angleKey]).value}`;
  }
}

此时图例会自动绑定categoryKey对应的原始文本，无需额外修改legendKey相关配置。

核心原理 #

AG Grid饼图默认会让calloutLabel和图例共享数据源的字段关联逻辑，当你修改标注文本的格式化规则时，图例文本会同步变化。通过单独为图例配置formatter，可以打破这种默认关联，让两个元素分别使用不同的文本内容。

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