段階的埋め込みを使用する
Power BI 埋め込み分析 powerbi.load と report.render API を使用すると、開発者がレポート埋め込みをフェーズ化する柔軟性を高めることで、エンド ユーザー エクスペリエンスを向上させることができます。
通常は、 を使用して埋め込みレポートを powerbi.embed読み込みます。
let report = powerbi.embed(embedContainer, embedConfig);
埋め込まれたレポートは、ユーザー インターフェイスで読み込まれて表示されます。 その後、エンド ユーザーには、表示されたレポートとの対話が表示されます。 たとえば、スライサーの状態を適用すると、レポートのレンダリング後にスライサーが有効になります。
これらの相互作用をエンド ユーザーに隠すために、 powerbi.load API と report.render API は埋め込みプロセスをフェーズに分割します。 この関数は powerbi.load レポートを読み込み、エンド ユーザーが結果を表示する前にアイテムを操作できるようにします。 その後、関数によって report.render レポートが表示されます。
[読み込み]
関数は powerbi.load レポートを読み込みますが、表示しないため、エンド ユーザーが結果を表示する前に操作が行われる可能性があります。 たとえば、 で report.getPagesを使用powerbi.loadし、エンド ユーザーを表示するページを指定できます。 または、 を使用 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する場合は、コードを実行した report.render 後、イベント ハンドラー関数で loaded 関数を呼び出す必要があります。 レポートのレンダリングを続行し、埋め込みレポートを表示するには、 を使用 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();
});
制限事項
段階的埋め込みではレポートのレンダリングが遅くなる可能性があるため、必要な場合にのみ正しく使用してください。
レポートを読み込んでから を呼び出す前に、次の API を呼び出 report.renderすことができます。
| Method | アクション |
|---|---|
| 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 | ビジュアル スライサーの状態を取得して設定します。 |