사용자 지정 레이아웃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. 자세히 알아보려면 포함 구성 세부 정보를 참조하세요.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. 자세한 내용은 PagesLayout을 참조하세요.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