レポート レイアウトをカスタマイズする

  • [アーティクル]

カスタム レポート レイアウトを使用すると、元のレポートに保存されたものとは異なるレイアウトで Power BI レポートを埋め込むことができます。 カスタム レポート レイアウトを定義すると、レポート ページのサイズを変更したり、ページ上のビジュアルのサイズ、位置、表示を制御したりできます。

カスタム レイアウトの概要

カスタム レポート レイアウトを作成するには、 カスタム レイアウト オブジェクト を定義し、埋め込み構成の設定オブジェクトに渡します。

settings オブジェクトで、カスタム レイアウト オブジェクトにmodels.LayoutType.Custom設定layoutTypeし、設定customLayoutします。

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {...}
    }
};

レポート設定の詳細については、「レポート設定の 構成」を参照してください。

カスタム レポート レイアウトを定義する方法

各カスタム レポート レイアウトは、ページ サイズ、キャンバスのスケール、およびページ レイアウトを指定するために定義したカスタム レイアウト オブジェクトによって表されます。 ページ レイアウト内では、各ビジュアルのビジュアル レイアウトとレポートの既定のビジュアル レイアウトを指定できます。

カスタム レイアウト インターフェイス定義

インターフェイスを ICustomLayout 使用して、カスタム レイアウト オブジェクトを定義します。

interface ICustomLayout {
    pageSize?: IPageSize;
    displayOption?: DisplayOption;
    pagesLayout?: PagesLayout;
}

ICustomLayout インターフェイスには、次のプロパティがあります。

  • pageSizeIPageSize- レポートのキャンバス領域のページ サイズを定義するオブジェクト。

    interface IPageSize {
    type: PageSizeType;
}

    オブジェクトは IPageSize 列挙型を PageSizeType 使用してページ サイズを設定します。

    enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}

  • displayOptionDisplayOption- フレームに収まるようにキャンバスをスケーリングする方法を制御する列挙型。

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayoutPagesLayout- ページ上の各ビジュアルのレイアウトを制御するオブジェクト。 このプロパティは、ページ名をオブジェクトに PageLayout マップします。 詳細については、「 ページ レイアウトの定義」を参照してください。

    type PagesLayout = { [key: string]: IPageLayout; }

ページ レイアウトを定義する

インターフェイスを IPageLayout 使用して、ページ レイアウト オブジェクトを定義します。 インターフェイスを使用すると、各ビジュアル名を新しいレイアウト オブジェクトと既定のビジュアル レイアウトにマップするビジュアル レイアウト マップを定義できます。 ページ レイアウトの定義は省略可能です。 レポートのレイアウトを指定しない場合、Power BI は既定のレイアウトをレポートに適用します。 つまり、既定のレイアウトは、ビジュアル レイアウト オブジェクトで指定しないすべてのビジュアルに適用されます。 たとえば、最初はレポート内のすべてのビジュアルを非表示にし、選択したビジュアルを選択したレイアウトに表示できます。

interface IPageLayout {
    defaultLayout: IVisualLayout,
    visualsLayout: { [key: string]: IVisualLayout; };
}

IPageLayout インターフェイスには、次のプロパティがあります。

  • defaultLayout - 既定の IVisualLayout ビジュアル レイアウトを定義するオブジェクト。 既定のレイアウトは、レポート ページ上のすべてのビジュアルに自動的に適用されます。

    defaultLayout?: IVisualLayout

  • visualsLayoutVisualsLayout- レポート ページ上のビジュアル名とビジュアル レイアウトの間のマップを定義するオブジェクト。

    visualsLayout: VisualsLayout

    VisualsLayout = { [key: string]: IVisualLayout; }

ビジュアル レイアウトを定義する

ビジュアル レイアウトを定義するには、インターフェイスを IVisualLayout 使用してビジュアル レイアウト オブジェクトを作成し、その位置、サイズ、および可視性を設定します。

interface IVisualLayout {
    x?: number;
    y?: number;
    z?: number;
    width?: number;
    height?: number;
    displayState?: IVisualContainerDisplayState;
}

IVisualLayout インターフェイスには、次のプロパティがあります。

  • x,y,z - ビジュアルの x、y、z 座標を定義します。

  • width、 height - ビジュアルの幅と高さを定義します。

  • displayStateIVisualContainerDisplayState- ビジュアルの可視性を定義するオブジェクト。

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    オブジェクトは IVisualContainerDisplayState 列挙型を VisualContainerDisplayMode 使用して可視性を設定します。

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

レイアウトの更新

レポートが既に読み込まれているときにレポート レイアウトを更新するには、メソッドを report.updateSettings 使用します。 詳細については、「 実行時にレポート設定を更新する」を参照してください。

例

この完全なコード例では、カスタム レポート レイアウトを使用してレポートを埋め込む方法を示します。 VisualContainer1 と VisualContainer2 の 2 つのビジュアルを除き、すべてのビジュアルは非表示になります。 VisualContainer1 には新しいレイアウト、位置、およびサイズがあり、 VisualContainer2 はレポートの既定のレイアウトで表示されます。

// Get models. Models contains enums that can be used.
let models = window['powerbi-client'].models;

let embedConfig = {
    type: 'report',
    id: reportId,
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'H4...rf',
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: 1600,
                height: 1200
            },
            displayOption: models.DisplayOption.ActualSize,
            pagesLayout: {
                "ReportSection1" : {
                    defaultLayout: {
                        displayState: {
                            mode: models.VisualContainerDisplayMode.Hidden
                        }
                    },
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                    }
                }
            }
        }
    }
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);

次のステップ

ページとビジュアルを取得する

レポート設定の構成