Sdílet prostřednictvím

Přizpůsobení rozložení sestavy

  • Článek

Pomocí vlastního rozložení sestavy můžete vložit sestavu Power BI s jiným rozložením, než které bylo uloženo v původní sestavě. Když definujete vlastní rozložení sestavy, můžete změnit velikost stránky sestavy a řídit velikost, umístění a viditelnost vizuálů na stránce.

Přehled vlastního rozložení

Pokud chcete vytvořit vlastní rozložení sestavy, definujte objekt vlastního rozložení a předejte ho objektu nastavení v konfiguraci vložení.

V objektu nastavení nastavte layoutType na models.LayoutType.Custom a nastavte customLayout na objekt vlastního rozložení:

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

Další informace o nastavení sestavy najdete v tématu Konfigurace nastavení sestavy.

Definování vlastního rozložení sestavy

Každé vlastní rozložení sestavy je reprezentováno objektem vlastního rozložení, který definujete pro určení velikosti stránky, měřítka plátna a rozložení stránek. V rozložení stránek můžete určit rozložení vizuálu pro každý vizuál a výchozí rozložení vizuálu pro sestavu.

Definice vlastního rozhraní rozložení

K definování vlastního objektu rozložení použijte rozhraní ICustomLayout:

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

Rozhraní ICustomLayout má následující vlastnosti:

  • pageSize – objekt IPageSize, který definuje velikost stránky oblasti plátna pro sestavu.

    interface IPageSize {
    type: PageSizeType;
}

    Objekt IPageSize pomocí výčtu PageSizeType nastaví velikost stránky:

    enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}

  • displayOption – výčet DisplayOption, který určuje, jak škálovat plátno tak, aby se vešly do rámečku.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout – objekt PagesLayout, který řídí rozložení jednotlivých vizuálů na stránce. Tato vlastnost mapuje název stránky na objekt PageLayout. Další informace najdete v tématu Definování rozložení stránek.

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

Definování rozložení stránek

K definování objektu rozložení stránek použijte rozhraní IPageLayout. Rozhraní umožňuje definovat mapu rozložení vizuálu, která mapuje názvy jednotlivých vizuálů na nový objekt rozložení a výchozí rozložení vizuálu. Definování rozložení stránek je volitelné. Pokud pro sestavu nezadáte rozložení, Použije Power BI výchozí rozložení pro sestavu. To znamená, že výchozí rozložení platí pro všechny vizuály, které v objektu rozložení vizuálů nezadáte. Můžete například zpočátku skrýt všechny vizuály v sestavě a pak zobrazit vybrané vizuály v rozložení podle vašeho výběru.

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

Rozhraní IPageLayout má následující vlastnosti:

  • defaultLayout – objekt IVisualLayout, který definuje výchozí rozložení vizuálu. Výchozí rozložení se automaticky použije u všech vizuálů na stránce sestavy.

    defaultLayout?: IVisualLayout

  • visualsLayout – objekt VisualsLayout, který definuje mapu mezi názvy vizuálů a rozloženími vizuálů na stránce sestavy.

    visualsLayout: VisualsLayout

    VisualsLayout = { [key: string]: IVisualLayout; }

Definování rozložení vizuálu

Pokud chcete definovat rozložení vizuálu, použijte rozhraní IVisualLayout k vytvoření objektu rozložení vizuálu a nastavení jeho umístění, velikosti a viditelnosti.

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

Rozhraní IVisualLayout má následující vlastnosti:

  • x,y,z – definuje souřadnice vizuálu x, y a z.

  • width, height – definuje šířku a výšku vizuálu.

  • displayState – objekt IVisualContainerDisplayState, který definuje viditelnost vizuálu.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    Objekt IVisualContainerDisplayState používá k nastavení viditelnosti výčet VisualContainerDisplayMode:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Aktualizace rozložení

Chcete-li aktualizovat rozložení sestavy při již načtené sestavě, použijte metodu report.updateSettings. Další informace najdete v tématu Aktualizace nastavení sestavy za běhu.

Příklad

Tento úplný příklad kódu ukazuje, jak vložit sestavu s vlastním rozložením sestavy. Všechny vizuály jsou skryté kromě dvou vizuálů: VisualContainer1 a VisualContainer2. visualContainer1 má nové rozložení, umístění a velikost, zatímco VisualContainer2 je viditelné s výchozím rozložením sestavy.

// 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);

Související obsah