Aracılığıyla paylaş

Rapor düzenini kişiselleştirme

  • Makale

Özel rapor düzeniyle, özgün rapora kaydedilenden farklı bir düzene sahip bir Power BI raporu ekleyebilirsiniz. Özel bir rapor düzeni tanımlarken, rapor sayfasının boyutunu değiştirebilir ve sayfadaki görsellerin boyutunu, konumunu ve görünürlüğünü denetleyebilirsiniz.

Özel düzene genel bakış

Özel rapor düzeni oluşturmak için, bir özel düzen nesnesi tanımlayın ve bunu ekleme yapılandırmasındaki ayarlar nesnesine geçirin.

Ayarlar nesnesinde layoutTypemodels.LayoutType.Custom olarak ayarlayın ve customLayout özel düzen nesnenize ayarlayın:

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

Rapor ayarları hakkında daha fazla bilgi için bkz. Rapor ayarlarını yapılandırma.

Özel rapor düzeni tanımlama

Her özel rapor düzeni, sayfa boyutunu, tuval ölçeğini ve sayfa düzenini belirtmek için tanımladığınız bir özel düzen nesnesiyle temsil edilir. Sayfalar düzeninde, her görsel için bir görsel düzeni ve rapor için varsayılan görsel düzeni belirtebilirsiniz.

Özel düzen arabirimi tanımı

Özel bir düzen nesnesi tanımlamak için ICustomLayout arabirimini kullanın:

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

ICustomLayout arabirimi aşağıdaki özelliklere sahiptir:

  • pageSize - Rapor için tuval alanının sayfa boyutunu tanımlayan bir IPageSize nesnesi.

    interface IPageSize {
    type: PageSizeType;
}

    IPageSize nesnesi, sayfa boyutunu ayarlamak için PageSizeType numaralandırmasını kullanır:

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

  • displayOption - Tuvalin çerçeveye sığacak şekilde nasıl ölçeklendirildiğini denetleyan bir DisplayOption sabit listesi.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout - Sayfadaki her görselin düzenini denetleen bir PagesLayout nesnesi. Bu özellik, sayfa adını bir PageLayout nesnesiyle eşler. Daha fazla bilgi için bkz. Sayfa düzeni tanımlama.

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

Sayfa düzeni tanımlama

Sayfa düzeni nesnesi tanımlamak için IPageLayout arabirimini kullanın. Arabirim, her görsel adını yeni bir düzen nesnesine ve varsayılan görsel düzenine eşleyen bir görsel düzen haritası tanımlamanızı sağlar. Sayfa düzeni tanımlamak isteğe bağlıdır. Bir rapor için düzen sağlamazsanız, Power BI rapora varsayılan düzeni uygular. Diğer bir ifadeyle, varsayılan düzen, görsel düzeni nesnesinde belirtmediğiniz tüm görseller için geçerlidir. Örneğin, başlangıçta bir rapordaki tüm görselleri gizleyebilir ve ardından seçtiğiniz düzende seçili görselleri gösterebilirsiniz.

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

IPageLayout arabirimi aşağıdaki özelliklere sahiptir:

  • defaultLayout - Varsayılan görsel düzenini tanımlayan bir IVisualLayout nesnesi. Varsayılan düzen, rapor sayfasındaki tüm görsellere otomatik olarak uygulanır.

    defaultLayout?: IVisualLayout

  • visualsLayout - Rapor sayfasındaki görsel adlar ve görsel düzenler arasında bir eşleme tanımlayan VisualsLayout nesnesi.

    visualsLayout: VisualsLayout

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

Görsel düzen tanımlama

Görsel düzen tanımlamak için IVisualLayout arabirimini kullanarak bir görsel düzen nesnesi oluşturun ve konumunu, boyutunu ve görünürlüğünü ayarlayın.

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

IVisualLayout arabirimi aşağıdaki özelliklere sahiptir:

  • x,y,z - Görselin x, y ve z koordinatlarını tanımlar.

  • width, height - Görselin genişliğini ve yüksekliğini tanımlar.

  • displayState - Görselin görünürlüğünü tanımlayan bir IVisualContainerDisplayState nesnesi.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    IVisualContainerDisplayState nesnesi görünürlüğü ayarlamak için VisualContainerDisplayMode numaralandırmasını kullanır:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Düzeni güncelleştirme

Rapor zaten yüklendiğinde rapor düzenini güncelleştirmek için report.updateSettings yöntemini kullanın. Daha fazla bilgi için bkz.çalışma zamanında rapor ayarlarını güncelleştirme .

Örnek

Bu eksiksiz kod örneği, özel bir rapor düzeniyle rapor eklemeyi gösterir. İki görsel dışında tüm görseller gizlenir: VisualContainer1 ve VisualContainer2. VisualContainer1 yeni bir düzen, konum ve boyuta sahipken, VisualContainer2 raporun varsayılan düzeniyle görünür.

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

İlgili içerik