如何获取Plotly热力图中被点击形状的索引

Plotly原生未直接暴露点击形状轮廓的事件，但可以通过**猴子补丁（Monkey Patch）**重写内部的activateShape函数，在点击触发该函数时获取形状索引并扩展自定义逻辑。

实现步骤 #

1. 初始化热力图与绘图模式
   先创建热力图并开启drawrect拖拽模式：

   // 热力图数据
   const heatmapData = [{
     z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
     type: 'heatmap'
   }];
   
   const layoutConfig = {
     dragmode: 'drawrect',
     clickmode: 'event+select'
   };
   
   // 渲染热力图
   Plotly.newPlot('heatmapContainer', heatmapData, layoutConfig);
   

2. 重写activateShape函数
   保存原始函数逻辑，在其执行后添加自定义事件触发或索引处理代码：

   // 保存Plotly原生的activateShape方法
   const originalActivate = Plotly.Plot.prototype.activateShape;
   
   // 重写方法，注入自定义逻辑
   Plotly.Plot.prototype.activateShape = function(info) {
     // 执行原生激活逻辑
     originalActivate.call(this, info);
   
     // 获取被点击形状的索引（对应layout.shapes数组中的位置）
     const shapeIndex = info.index;
     if (shapeIndex !== undefined) {
       // 方式1：直接在控制台输出索引，或执行业务逻辑
       console.log('点击的形状索引:', shapeIndex);
       // 可通过this.layout.shapes[shapeIndex]获取该形状的完整配置
   
       // 方式2：触发自定义DOM事件，供外部监听
       const shapeClickEvent = new CustomEvent('plotly_shape_clicked', {
         detail: { index: shapeIndex, shape: this.layout.shapes[shapeIndex] }
       });
       this.div.dispatchEvent(shapeClickEvent);
     }
   };
   

3. 监听自定义事件（可选）
   如果用自定义DOM事件，可在外部监听并处理：

   document.getElementById('heatmapContainer').addEventListener('plotly_shape_clicked', (e) => {
     const { index, shape } = e.detail;
     console.log('捕获到形状点击，索引:', index);
     console.log('形状详情:', shape);
     // 这里添加你的业务逻辑，比如高亮、数据筛选等
   });
   

注意事项 #

• 此方法依赖Plotly内部实现，若后续版本activateShape的参数或逻辑变更，需同步调整代码。
• 确保在Plotly图表初始化完成后再执行补丁代码，避免找不到目标函数。

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