Angular嵌入Power BI可视化：程序化清除数据点选中状态

核心思路 #

借助Power BI JavaScript API的visuals.clearSelections()方法，单独针对目标堆叠柱形图清除选中状态，完全不会影响报表其他部分的筛选设置或其他可视化的选中数据。

Angular环境下实现步骤 #

1. 获取报表实例引用
   在Angular组件中，通过powerbi-client-angular的组件引用拿到嵌入的Power BI报表对象：

   import { PowerBIEmbedComponent } from 'powerbi-client-angular';
   import { ViewChild } from '@angular/core';
   
   // 组件内声明报表组件引用
   @ViewChild(PowerBIEmbedComponent) pbiEmbedComponent!: PowerBIEmbedComponent;
   

2. 定位并清除目标可视化选中状态
   编写异步方法，先获取所有可视化集合，筛选出目标堆叠柱形图，再调用清除选中状态的API：

   async resetBarChartSelection() {
     const report = this.pbiEmbedComponent.getEmbed();
     if (!report) return;
   
     // 获取当前页面所有可视化对象
     const visuals = await report.getVisuals();
     // 根据可视化名称或ID定位目标（建议用ID，避免名称修改导致失效）
     const targetVisual = visuals.find(visual => 
       visual.id === "你的堆叠柱形图ID" || visual.name === "你的堆叠柱形图名称"
     );
   
     if (targetVisual) {
       // 仅清除该可视化的选中状态
       await targetVisual.clearSelections();
     }
   }
   

3. 触发清除操作
   在需要的场景调用上述方法，比如绑定按钮点击事件：

   <button (click)="resetBarChartSelection()">清除柱形图选中高亮</button>
   

关键注意点 #

• 「用户拥有数据」模式下默认具备调用该API的权限，无需额外配置。
• 可视化ID可通过Power BI服务端编辑页面，进入目标可视化的「格式」-「视觉对象属性」查看，也可通过console.log(visuals)打印所有可视化信息获取。
• 该操作仅作用于目标可视化，不会重置报表其他筛选、切片器状态或其他可视化的选中数据。

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