Angular中使用Chart.js如何识别雷达图被点击的数据标签

你当前使用的是Angular生态下封装了Chart.js的ng2-charts组件，完全不需要手动创建原生Chart实例，借助组件自带的封装能力就可以完成雷达图轴标签的点击识别，核心问题点是你之前把点击事件的挂载位置搞错了：
你现在把回调挂在了图例的onHover配置上，这个配置仅作用于右侧图例区域的悬浮触发，和雷达图每个轴端点的标注标签（也就是你截图里需要点击的pointLabels）完全无关，所以永远触发不了正确的识别逻辑。

具体实现步骤 #

1. 模板层补充ng2-charts自带的点击事件绑定
   组件本身已经封装了原生Chart的事件逻辑，不需要你手动调用getElementsAtEvent，直接在<canvas>标签上绑定自带的chartClick输出事件即可，会自动帮你返回当前点击位置命中的所有图表元素。
   修正后的模板代码：

   <div style="display: block">
     <canvas 
       id="radarChart" 
       baseChart 
       [datasets]="radarChartData" 
       [labels]="radarChartLabels"
       [chartType]="radarChartType" 
       [options]="radarChartOptions"
       (chartClick)="onChartLabelClick($event)"
     ></canvas>
   </div>
   

2. 组件层修正配置、补充点击识别逻辑

   • 先删掉原来错误写在legend配置里的onHover绑定，避免无效的事件触发
   • 实现onChartLabelClick回调方法，直接从事件返回值里识别被点击的轴标签
     修正后的组件核心代码：

   export class GraficoRadarComponent implements OnInit {
     public radarChartLabels = [];
     public radarChartData = [{
       label: '',
       data: [],
       hidden: false,
     }];
   
     public radarChartOptions = {
       responsive: true,
       scale: {
         ticks: {
           beginAtZero: true,
           min: 0,
           max: 4,
           stepSize: 1,
         },
         pointLabels: {
           fontSize: 15,
           // 扩大标签的点击触发范围，解决小字点不准的问题
           hitTolerance: 20
         }
       },
       legend: {
         position: 'right',
         labels: {
           fontColor: 'black',
           fontSize: 15,
         },
       }
     };
     public radarChartType = 'radar';
   
     onChartLabelClick(eventParams) {
       // 获取当前点击位置命中的所有图表元素
       const hitElements = eventParams.activeElements;
       if (!hitElements.length) return;
   
       // 遍历命中元素，识别是否是雷达图轴标签
       for (const item of hitElements) {
         // 轴标签元素的标识为pointLabel类型
         if (item.element?.options?.isPointLabel) {
           // 通过元素自带的索引，取到对应的标签文本
           const clickedLabelText = this.radarChartLabels[item.index];
           // 这里直接写后续逻辑：根据拿到的标签，加载对应的专属图表
           console.log('当前点击的标签：', clickedLabelText);
         }
       }
     }
   }
   

关键注意点 #

• 整个流程不需要手动获取原生Chart实例：ng2-charts在内部已经完成了原生实例的创建、维护和事件透传，你拿到的activeElements数组和手动调用getElementsAtEvent返回的结果完全一致，不会出现脱离封装的响应式异常。
• 给pointLabels加hitTolerance配置：因为轴标签本身是小尺寸的文本，默认的点击触发范围很小，把这个值设为15-20就可以明显提升点击准确率，不会出现点好几次中不了的问题。

内容的提问来源于stack exchange，提问作者Cristian Figueroa