レポート ビジュアルを埋め込む

  • [アーティクル]

先端

Power BI Embedded Analytics Playgroundの「Api を調べる」セクションで、レポートビジュアルを埋め込んだり、クライアント API を試してみてください。

この記事では、アプリケーションにビジュアルを埋め込む手順について説明します。 Power BIの ビジュアルのビジュアルの詳細について説明します。

ビジュアルを埋め込む方法

Power BI コンテンツをアプリに埋め込む場合は、構成オブジェクトを使用して埋め込むコンテンツを定義し、コンテンツの設定を指定します。 次に、そのオブジェクトを API に渡します。

ビジュアルを埋め込む場合は、IVisualLoadConfiguration型の構成オブジェクトを使用します。

interface IVisualLoadConfiguration {
    accessToken?: string;
    embedUrl?: string;
    id?: string;
    pageName: string;
    tokenType?: models.TokenType;
    type: string;
    visualName: string;
}

このインターフェイスには、次のプロパティが含まれています。

  • accessToken - 埋め込む Power BI データへのアクセスを許可するトークン。 アクセス トークンの詳細については、「 さまざまな埋め込みソリューションについて理解する」を参照してください。

  • embedUrl - 埋め込むビジュアルを含むレポートの URL。 この URL は、埋め込みビジュアルを含む HTML iframe 要素のソースになります。 具体的には、API によって、iframeの src 属性に URL が割り当てられます。 Report API を使用して、この URL を取得できます。 2 つの例を次に示します。

  • id - 埋め込むビジュアルを含む Power BI レポートの ID。

  • pageName - 埋め込むビジュアルを含むページの名前。 Report getPages メソッドを使用して、レポート内のページを取得できます。

  • tokenType - 埋め込む Power BI データへのアクセスを提供するトークンの種類。

    • 組織用に埋め込む場合 (ユーザーがデータを所有している) 場合は、models.TokenType.Aad を使用します。
    • 顧客用に埋め込む場合 (アプリがデータを所有している) 場合は、models.TokenType.Embed を使用します。

    詳細については、「さまざまな埋め込みソリューション を理解する」を参照してください。

  • type - 埋め込むコンテンツの種類。 ビジュアルには 'visual' を使用します。

  • visualName - 埋め込むビジュアルの名前。 Page getVisuals メソッドを使用して、ページ内のビジュアルを取得できます。

例

次の例は、1 つのビジュアルを埋め込む方法を示しています。

// Set up the configuration object that determines what to embed and how to embed it.
let embedConfiguration = {
    accessToken: anAccessToken,
    embedUrl: anEmbedUrl,
    id: aReportId,
    pageName: aPageName,
    tokenType: aTokenType,
    type: 'visual',
    visualName: aVisualName
};
 
// Get a reference to the HTML element that contains the embedded report.
let embedContainer = $('#embedContainer')[0];
 
// Embed the visual.
let visual = powerbi.embed(embedContainer, embedConfiguration);

フィルター

既定では、updateFilters API は、1 つのレポート ビジュアルを埋め込むときにビジュアル レベル フィルターを適用します。 これにより、レポート レベルで適用されるため、埋め込み構成オブジェクトに適用されたフィルターとの競合が発生する可能性があります。 この問題を解決するには、API でフィルター レベルを設定します。

await visual.updateFilters(FiltersOperations.Add, filters, FiltersLevel.Report);

詳細については、コントロール レポート フィルターのフィルターに関するページを参照してください。

関連コンテンツ