跨页面的 Power BI 同步切片器

简介

在 Power BI 分析报表中，切片器是一种非常有用的工具，它可以帮助用户筛选数据以及实现交互式浏览数据的功能。通常情况下，单个页面上的切片器只能影响到当前页面上的其他视觉元素。然而，有时候我们希望能够在不同页面之间同步切片器的选择，以便用户在浏览多个页面时能够保持一致的筛选。

本文将介绍如何实现跨页面的 Power BI 同步切片器功能，以提供一致性的数据筛选体验。

方案概述

要实现跨页面的 Power BI 同步切片器功能，我们可以借助 Power BI 的 JavaScript API 和 Power BI Embedded 功能。以下是具体的实现步骤：

1. 注册 Power BI Embedded 应用，并获取对应的 embed token 和报表 ID。
2. 在 Power BI 分析报表中创建一个「同步切片器」页面，该页面将用于放置需要进行同步的切片器。
3. 使用 Power BI JavaScript API 在页面加载时获取报表对象，并将报表对象保存在全局变量中。
4. 在页面加载时获取当前报表的切片器选择状态，并将其保存在全局变量中。
5. 监听切片器的选择事件，在选择发生变化时更新全局变量中的切片器选择状态。
6. 在其他页面中的切片器选择事件中，使用 Power BI JavaScript API 更新同步切片器页面中的切片器选择状态。
7. 在其他页面加载时，使用 Power BI JavaScript API 根据全局变量中的切片器选择状态来设置切片器的选择。

代码示例

<!-- 页面加载时获取报表对象 -->
let report;

function loadReport() {
  powerbi.bootstrap(document.getElementById('reportContainer'), { type: 'report', id: '<报表 ID>', embedUrl: '<embedUrl>', accessToken: '<embed token>' }, config);
  
  powerbi.get('report').then((reportObj) => {
    report = reportObj;
    
    // 获取当前报表的切片器选择状态
    const slicerState = report.getFilters();
    // 保存切片器选择状态到全局变量
    window.slicerState = slicerState;
  });
}

function updateSlicerState(filterState) {
  // 更新全局变量中的切片器选择状态
  window.slicerState = filterState;
}

function syncSlicerSelection() {
  // 在其他页面中的切片器选择事件中更新同步切片器页面中的切片器选择状态
  report.updateFilters(window.slicerState);
}

<!-- 页面加载时调用函数 -->
loadReport();

<!-- 监听切片器选择事件 -->
report.on('filtersApplied', (filterState) => {
  updateSlicerState(filterState);
});

<!-- 在其他页面加载时调用函数同步切片器选择 -->
syncSlicerSelection();

结论

通过使用 Power BI JavaScript API 和 Power BI Embedded，我们可以实现跨页面的 Power BI 同步切片器的功能。这样用户在浏览多个页面时可以保持一致的数据筛选，提供更好的数据分析体验。