보고서 레이아웃 개인 설정

아티클
06/24/2024

사용자 지정 보고서 레이아웃을 사용하면 원래 보고서에 저장된 것과 다른 레이아웃으로 Power BI 보고서를 포함할 수 있습니다. 사용자 지정 보고서 레이아웃을 정의할 때 보고서 페이지의 크기를 변경하고 페이지에서 시각적 개체의 크기, 위치 및 표시 유형을 제어할 수 있습니다.

사용자 지정 레이아웃 개요

사용자 지정 보고서 레이아웃을 만들려면 사용자 지정 레이아웃 개체를 정의하고 포함 구성의 설정 개체에 전달합니다.

설정 개체에서 layoutTypemodels.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에서 기본 레이아웃을 보고서에 적용합니다. 즉, 기본 레이아웃은 시각적 개체에 지정하지 않은 모든 시각적 개체에 적용됩니다. 예를 들어 처음에는 보고서의 모든 시각적 개체를 숨기고 선택한 시각적 개체를 선택한 레이아웃에 표시할 수 있습니다.

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두 시각적 개체를 제외한 모든 시각적 개체가 숨겨집니다. 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);

페이지 및 시각적 개체 가져오기
보고서 설정 구성

다음을 통해 공유

보고서 레이아웃 개인 설정

사용자 지정 레이아웃 개요

사용자 지정 보고서 레이아웃을 정의하는 방법

사용자 지정 레이아웃 인터페이스 정의

페이지 레이아웃 정의

시각적 레이아웃 정의

레이아웃 업데이트

본보기

추가 리소스

다음을 통해 공유

보고서 레이아웃 개인 설정

사용자 지정 레이아웃 개요

사용자 지정 보고서 레이아웃을 정의하는 방법

사용자 지정 레이아웃 인터페이스 정의

페이지 레이아웃 정의

시각적 레이아웃 정의

레이아웃 업데이트

본보기

관련 콘텐츠

추가 리소스