次の方法で共有

段階的埋め込みを使用する

  • [アーティクル]

Power BI 埋め込み分析 powerbi.load API と 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を使用する場合は、コードを実行した後、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 ビジュアル スライサーの状態を取得して設定します。

関連コンテンツ