Udostępnij za pośrednictwem

Personalizowanie układu raportu

  • Artykuł

Za pomocą niestandardowego układu raportu można osadzić raport usługi Power BI z innym układem niż to, co zostało zapisane w oryginalnym raporcie. Podczas definiowania niestandardowego układu raportu można różnić rozmiar strony raportu i kontrolować rozmiar, położenie i widoczność wizualizacji na stronie.

Omówienie układu niestandardowego

Aby utworzyć niestandardowy układ raportu, zdefiniuj obiekt układu niestandardowego i przekaż go do obiektu ustawień w konfiguracji osadzania.

W obiekcie ustawień ustaw layoutType na models.LayoutType.Custom i ustaw customLayout na niestandardowy obiekt układu:

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

Aby uzyskać więcej informacji na temat ustawień raportu, zobacz Konfigurowanie ustawień raportu.

Jak zdefiniować niestandardowy układ raportu

Każdy niestandardowy układ raportu jest reprezentowany przez niestandardowy obiekt układu zdefiniowany w celu określenia rozmiaru strony, skalowania kanwy i układu stron. W układzie stron można określić układ wizualizacji dla każdej wizualizacji i domyślny układ wizualizacji raportu.

Definicja niestandardowego interfejsu układu

Użyj interfejsu ICustomLayout, aby zdefiniować obiekt układu niestandardowego:

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

Interfejs ICustomLayout ma następujące właściwości:

  • pageSize — obiekt IPageSize, który definiuje rozmiar strony obszaru kanwy dla raportu.

    interface IPageSize {
    type: PageSizeType;
}

    Obiekt IPageSize używa wyliczenia PageSizeType w celu ustawienia rozmiaru strony:

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

  • displayOption — wyliczenie DisplayOption, które kontroluje sposób skalowania kanwy w celu dopasowania do ramki.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout — obiekt PagesLayout, który kontroluje układ każdej wizualizacji na stronie. Ta właściwość mapuje nazwę strony na obiekt PageLayout. Aby uzyskać więcej informacji, zobacz Definiowanie układu stron.

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

Definiowanie układu stron

Użyj interfejsu IPageLayout, aby zdefiniować obiekt układu stron. Interfejs umożliwia zdefiniowanie mapy układu wizualizacji, która mapuje każdą nazwę wizualizacji na nowy obiekt układu i domyślny układ wizualizacji. Definiowanie układu stron jest opcjonalne. Jeśli nie podasz układu raportu, usługa Power BI zastosuje domyślny układ do raportu. Oznacza to, że domyślny układ ma zastosowanie do wszystkich wizualizacji, które nie są określone w obiekcie układu wizualizacji. Na przykład możesz początkowo ukryć wszystkie wizualizacje w raporcie, a następnie wyświetlić wybrane wizualizacje w wybranym układzie.

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

Interfejs IPageLayout ma następujące właściwości:

  • defaultLayout — obiekt IVisualLayout, który definiuje domyślny układ wizualizacji. Domyślny układ jest automatycznie stosowany do wszystkich wizualizacji na stronie raportu.

    defaultLayout?: IVisualLayout

  • visualsLayout — obiekt VisualsLayout definiujący mapę między nazwami wizualizacji a układami wizualnymi na stronie raportu.

    visualsLayout: VisualsLayout

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

Definiowanie układu wizualizacji

Aby zdefiniować układ wizualizacji, użyj interfejsu IVisualLayout, aby utworzyć obiekt układu wizualizacji i ustawić jego położenie, rozmiar i widoczność.

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

Interfejs IVisualLayout ma następujące właściwości:

  • x,y,z — definiuje współrzędne x, y i z wizualizacji.

  • width, height — definiuje szerokość i wysokość wizualizacji.

  • displayState — obiekt IVisualContainerDisplayState, który definiuje widoczność wizualizacji.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    Obiekt IVisualContainerDisplayState używa wyliczenia VisualContainerDisplayMode w celu ustawienia widoczności:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Aktualizowanie układu

Aby zaktualizować układ raportu, gdy raport jest już załadowany, użyj metody report.updateSettings. Aby uzyskać więcej informacji, zobacz Aktualizowanie ustawień raportu w czasie wykonywania.

Przykład

W tym kompletnym przykładzie kodu pokazano, jak osadzić raport z niestandardowym układem raportu. Wszystkie wizualizacje są ukryte z wyjątkiem dwóch wizualizacji: VisualContainer1 i VisualContainer2. visualContainer1 ma nowy układ, położenie i rozmiar, podczas gdy VisualContainer2 jest widoczny z domyślnym układem raportu.

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

Powiązana zawartość