Vlastní rozloženíCustom layouts

Vlastní rozložení umožňuje integrovat do sestavy jiné rozložení, než má původní sestava.Use custom layout to embed a report with different layout than in an original report. Při definování nového rozložení je možné definovat jenom velikost stránky, řídit velikosti vizuálů nebo řídit polohu a viditelnost.Defining a new layout varies between defining only a page size, controlling visual sizes, or position and visibility.

Pokud chcete definovat vlastní rozložení, zadejte vlastní objekt rozložení objektu a předejte ho do objektu nastavení ve vložené konfiguraci.To define a custom layout, define a custom layout object and pass it into the settings object in embed configuration. Navíc nastavte LayoutType na Custom.In addition, set LayoutType to Custom. Další informace najdete v tématu věnovaném podrobnostem o vložené konfiguraci.To learn more, see Embed Configuration Details.

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

Definice objektuObject 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: Velikost stránky určuje velikost oblasti plátna (to znamená bílou oblast sestavy).pageSize: Use page size to control the canvas area size (i.e. report white area).
  • displayOptions: Možné hodnoty jsou FitToWidth, FitToPage a ActualSize.displayOptions: Possible values are: FitToWidth, FitToPage or ActualSize. Určuje, jak změnit velikost plátna tak, aby se vešlo na iframe.It controls how to scale the canvas to fit into the iframe.
  • pagesLayout: Určuje rozložení pro jednotlivé vizuály.pagesLayout: Controls the layout for each visual. Další podrobnosti najdete u popisu PagesLayout.see PagesLayout for more details.

Rozložení stránekPages layout

Definování objektu rozložení stránky je v podstatě definování rozložení pro jednotlivé stránky. Pro každou stránku definujete rozložení pro jednotlivé vizuály.Defining a pages layout object is basically defining a layout for each page, and for each page, you define a layout for each visual. Třída PageLayout je nepovinná.PageLayout is optional. Pokud nebudete definovat rozložení pro stránku, použije se výchozí rozložení (které je uložené v sestavě).If you don't define a layout for a page, the default layout (which is saved in the report) will be applied.

pagesLayout je mapování názvu stránky na objekt PageLayout.pagesLayout is a map from page name to PageLayout object. Definice:Definition:

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

PageLayout obsahuje mapu rozložení vizuálů, která mapuje názvy jednotlivých vizuálů na objekt rozložení vizuálu:PageLayout contains a visual layout map, which maps each visual name to a visual layout object:

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

Rozložení vizuáluVisual layout

Pokud chcete definovat rozložení vizuálu, zadejte novou polohu a velikost a nový stav viditelnosti.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: Definuje novou polohu vizuálu.x,y,z: Defines the new position of the visual.
  • width, height: Definuje novou velikost vizuálu.width, height: Defines the new size of the visual.
  • displayState: Definuje viditelnost vizuálu.displayState: Defines the visibility of the visual.

Aktualizace rozloženíUpdate layout

K aktualizaci rozložení sestavy můžete použít metodu updateSettings, a to vždycky, když je tato sestava načtená.You can use updateSettings method to update the report layout any time while the report is loaded. Další informace viz Aktualizace nastavení.See Update Settings.

Příklad kóduCode 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);

Další informace najdete v tématechSee also

Vkládání řídicích panelů, sestav a dlaždic služby Power BI Embed your Power BI dashboards, reports and tiles
Zeptejte se v komunitě Power BI.Ask the Power BI Community