共用方式為

個人化報表配置

  • 發行項

使用自訂報表配置，您可以內嵌與原始報表中所儲存之配置不同的 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);

相關內容