レポート レイアウトをカスタマイズする
[アーティクル] 2024/06/24
3 人の共同作成者
フィードバック
この記事の内容
カスタム レイアウトの概要
カスタム レポート レイアウトを定義する方法
例
関連コンテンツ
カスタム レポート レイアウトでは、元のレポートに保存されたものとは異なるレイアウトで Power BI レポートを埋め込むことができます。 カスタム レポート レイアウトを定義すると、レポート ページのサイズを変更したり、ページ上のビジュアルのサイズ、位置、表示を制御したりできます。
カスタム レポート レイアウトを作成するには、 カスタム レイアウト オブジェクトを定義し、埋め込み構成の設定オブジェクトに渡します。
設定オブジェクトで、layoutType
を models.LayoutType.Custom
に設定し、customLayout
をカスタム レイアウト オブジェクトに設定します。
let embedConfig = {
...
settings: {
layoutType: models.LayoutType.Custom
customLayout: {...}
}
};
レポート設定の詳細については、「レポート設定 を構成する」を参照してください。
各カスタム レポート レイアウトは、ページ サイズ、キャンバス スケール、およびページ レイアウトを指定するために定義したカスタム レイアウト オブジェクトによって表されます。 ページ レイアウト内では、各ビジュアルのビジュアル レイアウトと、レポートの既定のビジュアル レイアウトを指定できます。
ICustomLayout
インターフェイスを使用して、カスタム レイアウト オブジェクトを定義します。
interface ICustomLayout {
pageSize?: IPageSize;
displayOption?: DisplayOption;
pagesLayout?: PagesLayout;
}
ICustomLayout インターフェイスには、次のプロパティがあります。
pageSize
- レポートのキャンバス領域のページ サイズを定義する IPageSize
オブジェクト。
interface IPageSize {
type: PageSizeType;
}
IPageSize
オブジェクトは、PageSizeType
列挙型を使用してページ サイズを設定します。
enum PageSizeType {
Widescreen,
Standard,
Cortana,
Letter,
Custom
}
displayOption
- フレームに収まるようにキャンバスをスケーリングする方法を制御する DisplayOption
列挙型。
enum DisplayOption {
FitToPage,
FitToWidth,
ActualSize
}
pagesLayout
- ページ上の各ビジュアルのレイアウトを制御する PagesLayout
オブジェクト。 このプロパティは、ページ名を PageLayout
オブジェクトにマップします。 詳細については、「ページ レイアウト を定義する」を参照してください。
type PagesLayout = { [key: string]: IPageLayout; }
IPageLayout
インターフェイスを使用して、ページ レイアウト オブジェクトを定義します。 インターフェイスを使用すると、各ビジュアル名を新しいレイアウト オブジェクトと既定のビジュアル レイアウトにマップするビジュアル レイアウト マップを定義できます。 ページ レイアウトの定義は省略可能です。 レポートのレイアウトを指定しない場合、Power BI は既定のレイアウトをレポートに適用します。 つまり、既定のレイアウトは、visuals レイアウト オブジェクトで指定しないすべてのビジュアルに適用されます。 たとえば、最初はレポート内のすべてのビジュアルを非表示にし、選択したビジュアルを選択したレイアウトで表示できます。
interface IPageLayout {
defaultLayout: IVisualLayout,
visualsLayout: { [key: string]: IVisualLayout; };
}
IPageLayout インターフェイスには、次のプロパティがあります。
defaultLayout
- 既定のビジュアル レイアウトを定義する IVisualLayout
オブジェクト。 既定のレイアウトは、レポート ページ上のすべてのビジュアルに自動的に適用されます。
defaultLayout?: IVisualLayout
visualsLayout
- レポート ページ上のビジュアル名とビジュアル レイアウトの間のマップを定義する VisualsLayout
オブジェクト。
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
- ビジュアルの幅と高さを定義します。
displayState
- ビジュアルの可視性を定義する IVisualContainerDisplayState
オブジェクト。
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);