Power BI自定义视觉：实现矩阵展开/折叠状态的持久化存储

要实现行展开/折叠状态的跨刷新保存，核心是利用Power BI自定义视觉框架提供的持久化存储服务，以下是具体实现步骤：

• 注入并使用Power BI的persistenceService
  这是官方推荐的标准方案，Power BI会自动处理存储的上下文隔离（比如区分不同报表、不同用户）。首先在视觉构造函数中通过IVisualHost获取该服务实例：

  export class CustomMatrixVisual implements IVisual {
      private persistenceService: IPersistenceService;
      // 用对象存储各行状态，key是行的唯一标识，value为展开/折叠布尔值
      private expandedRowStates: Record<string, boolean> = {};
  
      constructor(options: VisualConstructorOptions) {
          this.persistenceService = options.host.persistenceService;
          // 初始化时加载已保存的状态
          this.loadSavedStates();
      }
  }
  

• 为每行生成唯一标识
  给每个可展开的行生成唯一key，比如用行的层级路径拼接字符串（如"Electronics>Laptops>MacBook"），或者数据模型中自带的唯一ID，确保不同行的状态不会互相覆盖。

• 保存状态到持久化存储
  在用户触发行展开/折叠的事件处理函数中，更新状态对象并调用save方法存储：

  private onRowToggle(rowUniqueKey: string): void {
      // 切换当前行状态
      this.expandedRowStates[rowUniqueKey] = !this.expandedRowStates[rowUniqueKey];
      // 保存到Power BI持久化存储，第一个参数是自定义的存储键名，要唯一
      this.persistenceService.save("customMatrix_expandedStates", this.expandedRowStates);
      // 同步更新UI
      this.refreshRowExpansionUI();
  }
  

• 加载已保存的状态
  在视觉初始化或数据更新时，调用load方法读取之前保存的状态，并同步到UI：

  private async loadSavedStates(): Promise<void> {
      const savedStates = await this.persistenceService.load<Record<string, boolean>>("customMatrix_expandedStates");
      if (savedStates) {
          this.expandedRowStates = savedStates;
          // 根据加载的状态更新行的展开/折叠UI
          this.refreshRowExpansionUI();
      }
  }
  

• 数据更新时的状态同步
  当Power BI触发数据刷新（比如切片器切换、数据源更新），在update方法中先加载状态再渲染，确保新行的状态和已保存的对齐：

  public async update(options: VisualUpdateOptions) {
      // 先加载保存的状态
      await this.loadSavedStates();
      // 执行矩阵渲染逻辑
      this.renderMatrix(options.dataViews[0]);
  }
  

• 注意事项

  • 存储的状态必须是可序列化为JSON的对象，避免存函数或循环引用类型
  • 自定义的存储键名（如customMatrix_expandedStates）要确保唯一，防止和其他自定义视觉的存储冲突
  • Power BI Service和Desktop的持久化行为一致，Service会将状态关联到当前用户和报表，Desktop则保存在本地缓存

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