如何在ngx-charts-heat-map自定义Tooltip中访问扩展属性？

方法一：升级ngx-charts版本（推荐） #

部分较新的ngx-charts版本（如v18及以上）在处理热图数据时，会将原始数据对象的所有属性保留到tooltip的model中。升级后可直接在模板中访问自定义属性：

<ng-template #tooltipTemplate let-model="model">
  <pre>{{ model.tooltipText }}</pre>
</ng-template>

方法二：通过匹配原始数据获取自定义属性（兼容旧版本） #

如果无法升级版本，可利用model中的series（X轴分类名）和name（Y轴分类名），在原始heatmap数据中定位对应的自定义属性：

1. 在TS文件中添加查找方法 #

getTooltipContent(model: any): string {
  // 匹配对应的X轴系列
  const targetSeries = this.heatmap.find(item => item.name === model.series);
  if (!targetSeries) return '';
  // 匹配对应的Y轴数据点
  const targetPoint = targetSeries.series.find(point => point.name === model.name);
  return targetPoint?.tooltipText || '';
}

2. 在模板中调用该方法 #

<ng-template #tooltipTemplate let-model="model">
  <pre>{{ getTooltipContent(model) }}</pre>
</ng-template>

补充说明 #

• 确保heatmap数据结构正确：每个顶级项对应X轴分类，其series数组包含Y轴的各个数据点（需包含name、value、tooltipText）。
• 若需要复杂Tooltip布局，可直接在模板中根据查找结果渲染多元素结构，无需局限于文本输出。

内容的提问来源于stack exchange，提问作者David O'Brien