カスタム レイアウトCustom layouts

カスタム レイアウトを使って、元のレポートとは異なるレイアウトでレポートを埋め込みます。Use custom layout to embed a report with different layout than in an original report. 新しいレイアウトの定義は、ページ サイズのみを定義する場合と、ビジュアルのサイズ、位置、可視性を制御する場合では異なります。Defining a new layout varies between defining only a page size, controlling visual sizes, or position and visibility.

カスタム レイアウトを定義するには、カスタム レイアウト オブジェクトを定義して、埋め込み構成の設定オブジェクトに渡します。To define a custom layout, define a custom layout object and pass it into the settings object in embed configuration. さらに、LayoutType を Custom に設定します。In addition, set LayoutType to Custom. 詳しくは、「Embed Configuration Details」(埋め込み構成の詳細) をご覧ください。To learn more, see Embed Configuration Details.

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

オブジェクトの定義Object Definition

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

enum PageSizeType {
  Widescreen,
  Standard,
  Letter,
  Custom
}
interface IPageSize {
  type: PageSizeType;
}
interface ICustomPageSize extends IPageSize {
  width?: number;
  height?: number;
}

enum DisplayOption {
  FitToPage,
  FitToWidth,
  ActualSize
}
  • pageSize: キャンバス領域のサイズ (つまり、レポートの空白領域) を制御するには、ページ サイズを使います。pageSize: Use page size to control the canvas area size (i.e. report white area).
  • displayOptions: 使用できる値は、FitToWidth、FitToPage、ActualSize です。displayOptions: Possible values are: FitToWidth, FitToPage or ActualSize. iframe に収まるようにキャンバスを拡大縮小する方法を制御します。It controls how to scale the canvas to fit into the iframe.
  • pagesLayout: 各ビジュアルのレイアウトを制御します。pagesLayout: Controls the layout for each visual. 詳しくは、「ページ レイアウト」をご覧ください。see PagesLayout for more details.

ページ レイアウトPages layout

ページ レイアウト オブジェクトの定義は基本的に各ページのレイアウトを定義することであり、ページごとに各ビジュアルのレイアウトを定義します。Defining a pages layout object is basically defining a layout for each page, and for each page, you define a layout for each visual. PageLayout は省略できます。PageLayout is optional. ページのレイアウトを定義しないと、既定のレイアウト (レポートに保存されます) が適用されます。If you don't define a layout for a page, the default layout (which is saved in the report) will be applied.

pagesLayout は、ページ名から PageLayout オブジェクトへのマップです。pagesLayout is a map from page name to PageLayout object. 定義は次のとおりです。Definition:

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

PageLayout に含まれるビジュアル レイアウト マップでは、各ビジュアル名をビジュアル レイアウト オブジェクトにマップします。PageLayout contains a visual layout map, which maps each visual name to a visual layout object:

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

ビジュアル レイアウトVisual layout

ビジュアルのレイアウトを定義するには、新しい位置とサイズおよび新しい可視性の状態を渡します。To define a visual layout, pass a new position and size and a new visibility state.

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

interface IVisualContainerDisplayState {
  mode: VisualContainerDisplayMode;
}

enum VisualContainerDisplayMode {
  Visible,
  Hidden
}
  • x,y,z: ビジュアルの新しい位置を定義します。x,y,z: Defines the new position of the visual.
  • width、height: ビジュアルの新しいサイズを定義します。width, height: Defines the new size of the visual.
  • displayState: ビジュアルを表示するかどうかを定義します。displayState: Defines the visibility of the visual.

レイアウトの更新Update layout

レポートが読み込まれている間であればいつでも、updateSettings メソッドを使って、レポートのレイアウトを更新できます。You can use updateSettings method to update the report layout any time while the report is loaded. 設定の更新」をご覧ください。See Update Settings.

コードの例Code example

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

var embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    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" : {
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Hidden
                            }
                        },
                    }
                }
            }
        }
    }
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, embedConfiguration);

参照See also

Power BI ダッシュボード、レポート、およびタイルを埋め込む Embed your Power BI dashboards, reports and tiles
Power BI コミュニティに質問するAsk the Power BI Community