Персонализация макета отчета

  • Статья

С помощью пользовательского макета отчета можно внедрить отчет Power BI с другим макетом, отличным от того, что было сохранено в исходном отчете. При определении пользовательского макета отчета можно изменить размер страницы отчета и управлять размером, положением и видимостью визуальных элементов на странице.

Обзор пользовательского макета

Чтобы создать пользовательский макет отчета, определите объект пользовательского макета и передайте его в объект параметров в конфигурации внедрения.

В объекте settings задайте для layoutType значение models.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);

Связанное содержимое