共用方式為

使用階段式內嵌

  • 發行項

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.getFiltersPage.setFiltersPage.removeFilters 取得、設定和移除頁面篩選。
Page.getVisuals 取得頁面視覺效果。
Visual.getFiltersVisual.setFiltersVisual.removeFilters 取得、設定及移除視覺效果篩選。
Visual.getSlicerState、Visual.setSlicerState 取得和設定可視化交叉分析篩選器狀態。

相關內容