次の方法で共有

Angular アプリケーションに Power BI コンテンツを埋め込む

Power BI 埋め込み分析アプリケーションを作成する場合、Angular は保守可能でスケーラブルなアプリをすばやく設定するのに役立ちます。 Angular では、フロントエンド開発に構造と設計パターンが追加され、開発者は保守と更新が容易なより高度な Web アプリケーションを作成できます。

Power BI Angular ライブラリを使用すると、Angular アプリケーションに次の Power BI 項目を埋め込むことができます。

  • レポート
  • ダッシュ ボード
  • ダッシュボード タイル
  • レポートビジュアル
  • Q&A
  • ページ分割されたレポート

Angular Web アプリに Power BI コンテンツを埋め込む方法

このセクションでは、Angular をアプリにインポートし、それを使用して Power BI レポートを埋め込む方法について説明します。

使用方法の詳細については、Power BI Angular readme ファイルを参照してください。

Angular ライブラリをインポートする

Power BI Angular コンポーネントは、NPMにあります。 また、GitHubでオープン ソースです。

Angular を Web アプリにインポートするには、以下に示すインポートを追加します。

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Angular を使用してレポートを埋め込む

この例では、Angular を使用して Power BI レポートを埋め込む方法を示します。 次の例は、コード サンプル内の各コンポーネントの説明です。

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

次の一覧には、コード スニペットの例の各コンポーネントの説明または追加情報が含まれています。

  • embedConfig - 埋め込むコンテンツを定義し、コンテンツの設定を指定します。 埋め込み構成は、次の Power BI 項目を埋め込むと変更されます。

  • eventHandlers - イベント名とそのハンドラーのマップ オブジェクト。 詳細については、「イベント を処理する方法」を参照してください。

  • cssClassName - 埋め込みアイテムに CSS クラス名を指定します。これにより、CSS を使用して埋め込まれた iframe のスタイルを制御できます。

  • phasedEmbedding - 開発者がレポート埋め込みをフェーズ化する柔軟性を高めることで、エンド ユーザーのエクスペリエンスを向上させます。 詳細については、「段階的埋め込み を使用する」を参照してください。

Power BI レポートのブートストラップ

powerbi.bootstrap は、開発者が Power BI 項目をより迅速に埋め込み、パフォーマンスを向上させるために使用される方法です。 詳細については、「ブートストラップを使用してパフォーマンスを向上する」を参照してください。

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

ブートストラップ後にレポートを埋め込むには、embedConfig を更新します (少なくとも accessToken と embedUrl を使用)。

Angular デモ

Angular リポジトリには、PowerBIReportEmbed コンポーネントを使用してサンプル レポートを埋め込むデモが含まれています。 レポートのブートストラップから埋め込みレポートの埋め込みと更新までの完全なフローを示します。 また、[ビジュアル の削除] ボタンを クリックしたときにレポートからビジュアルを削除することで、powerbi レポート作成 ライブラリの使用方法についても説明します。 また、"DataSelected" イベントも設定します。

詳細については、readme ファイルの「demo」セクションを参照してください。

Power BI Angular Demo を示すアニメーション GIF。

デモを実行する

デモはリポジトリ内のサブフォルダーです。 localhost でデモを実行するには、次の手順に従います。

  1. 次のコマンドを実行します。

    npm run demo

  2. ブラウザーで表示するには、http:/localhost:4200/にリダイレクトします。

関連コンテンツ