通过

使用分阶段嵌入

  • 项目

Power BI 嵌入式分析 powerbi.load 和 report.render API 可以通过让开发人员更灵活地分阶段报表嵌入来提高最终用户体验。

通常，使用 powerbi.embed加载嵌入报表：

let report = powerbi.embed(embedContainer, embedConfig);

嵌入报表在用户界面中加载和呈现。 然后，最终用户将看到与呈现的报表的任何交互。 例如，如果应用切片器状态，最终用户会看到切片器在报表呈现后生效。

为了隐藏最终用户的这些交互，powerbi.load 和 report.render API 将嵌入过程分解为阶段。 powerbi.load 函数加载报表，以便在最终用户看到结果之前与项进行交互。 然后，report.render 函数将显示报表。

负荷

powerbi.load 函数加载报表但不呈现报表，因此在最终用户看到结果之前，可能会发生交互。 例如，可以将 powerbi.load 用于 report.getPages，然后指定要显示最终用户的页面。 或者，可以使用 page.getVisuals，然后决定要显示或隐藏哪些视觉对象。

与 powerbi.embed一样，powerbi.load 函数需要 HTML 元素和 IEmbedConfiguration 对象。

加载完成后，将触发 loaded 事件。

let config = {
    ...
};

// Get a reference to the embedded report HTML element.
let embedContainer = $('#embedContainer')[0];

// Load the report in the container.
let report = powerbi.load(embedContainer, config);

report.on('loaded', function() {
    ...
});

呈现

如果使用 powerbi.load，则在运行代码后，必须在 loaded 事件处理程序函数上调用 report.render 函数。 使用 report.render 继续报表呈现并显示嵌入的报表。

报表完成呈现时触发 rendered 事件。

report.on('loaded', function() {
    report.render();
});

report.on('rendered', () => {
    ...
});

有关处理事件的详细信息，请参阅 如何处理事件。

例

下面的代码示例加载报表、设置筛选器，然后呈现筛选的报表。

// Build the config object.
let config = {
    type: 'report',
    tokenType: TokenType.Embed,
    accessToken: ...,
    embedUrl: ...,
    id: ...,
    ...
};
 
// Get a reference to the embedded report HTML element.
let embedContainer = $('#embedContainer')[0];

// Load the report in the container.
let report = powerbi.load(embedContainer, config);

...
report.on('loaded', async () => {
    await report.setFilters(filters);
    report.render();
});

注意事项和限制

分阶段嵌入可能会减慢报表呈现速度，因此请确保正确使用它，并且仅在需要时使用。

可以在加载报表之后和调用 report.render之前调用以下 API：

方法 行动
BookmarksManager.getBookmarks、BookmarksManager.apply 获取并应用书签。 不支持捕获书签。
Report.updateSettings 更新报表设置。
Report.applyTheme 应用报表主题。
Report.getFilters、Report.setFilters、Report.removeFilters 获取、设置和删除报表筛选器。
Report.getPages 获取报表页。
Page.setActive 设置活动报表页。
Page.getFilters、Page.setFilters、Page.removeFilters 获取、设置和删除页面筛选器。
Page.getVisuals 获取页面视觉对象。
Visual.getFilters、Visual.setFilters、Visual.removeFilters 获取、设置和删除视觉对象筛选器。
Visual.getSlicerState、Visual.setSlicerState 获取和设置视觉切片器状态。

相关内容