次の方法で共有

ダッシュボードを埋め込む

  • [アーティクル]

この記事では、アプリケーションにダッシュボードを埋め込む手順について説明します。 ダッシュボードの詳細については、「Power BI デザイナーのダッシュボードの概要」を参照してください。

先端

power BI Embedded Analytics Playgroundの「API の の詳細」セクションで、ダッシュボードを埋め込んだり、クライアント API を試してみてください。

ダッシュボードを埋め込む方法

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

ダッシュボードを埋め込む場合は、IDashboardLoadConfiguration種類の構成オブジェクトを使用します。

interface IDashboardLoadConfiguration {
    accessToken: string;
    embedUrl?: string;
    id: string;
    pageView?: models.PageView 
    tokenType?: models.TokenType;
    type: string;
}

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

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

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

  • id - 埋め込むダッシュボードの ID。 この ID を取得するには、Dashboards API を使用します。 例えば：

  • pageView - API が埋め込みダッシュボードに使用する形式。 次のような可能性があります。

    • fitToWidth - 埋め込まれたダッシュボードの幅は、ダッシュボードを含む div 要素の幅と一致します。
    • oneColumn - 埋め込みダッシュボードが 1 つの列に表示されます。
    • actualSize - API は、埋め込まれたダッシュボードをフルサイズで表示します。

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

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

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

  • type - 埋め込むコンテンツの種類。 ダッシュボードに 'dashboard' を使用します。

例

次の例は、1 つのダッシュボードを埋め込む方法を示しています。

// Set up the configuration object that determines what to embed and how to embed it.
let embedConfiguration = {
    accessToken: anAccessToken,
    embedUrl: anEmbedUrl,
    id: aDashboardId,
    pageView: 'fitToWidth',
    tokenType: aTokenType,
    type: 'dashboard'
};
 
// Get a reference to the HTML element that contains the embedded dashboard.
let dashboardContainer = $('#dashboardContainer')[0];
 
// Embed the dashboard.
let dashboard = powerbi.embed(dashboardContainer, embedConfiguration);

考慮事項と制限事項

  • EM SKU へのダッシュボードの埋め込みはサポートされていません

  • コンテンツを埋め込むと、アプリはコンテンツを div 要素に表示します。 ダッシュボードを埋め込むときに actualSize の pageView 値を使用する場合:

    • ダッシュボードが div 要素よりも広い場合、API は埋め込みダッシュボードの幅として div 要素の幅を使用します。
    • ダッシュボードが div 要素よりも狭い場合、API は未使用の領域に埋め込まれた背景を埋めます。 既定では、背景は白ですが、透明に構成できます。 その場合、div 要素のスタイルは未使用の領域に表示されます。

関連コンテンツ