如何使用 Power Bi 嵌入報告將視覺對象加載到整個 div

Question

我正在使用 javascript 將具有單頁和單視圖的 Power BI 報表嵌入到我的應用程序中。視覺效果正在創建和加載正常，但它占據了我嵌入報表的父 div 的特定部分。我需要將該視覺效果拉伸到父 div 的全寬和全高。我試過這個，但它不適合我。

這是我目前的 output

在這里，我的視覺適合我的父 div 的中心，但我需要拉伸該視覺以覆蓋我的父 div 的所有剩余紅色部分

這是我的代碼

  let visualConfig = {
    type: 'report',
    tokenType: models.TokenType.Aad,
    accessToken: loggedInUser.accessToken,
    embedUrl: globalData.embedUrl,
    id: globalData.id,
    viewMode: models.ViewMode.View,
    permissions: models.Permissions.ReadWrite,
    datasetBinding: {
        datasetId: CurrentDataset
    },
    settings: {
        //layoutType: models.LayoutType.Custom,
        //customLayout: {
        //    pageSize: {
        //        type: models.PageSizeType.Custom,
        //        width: $("#idViewPreview").width(),
        //        height: 300
        //    },
        //    displayOption: models.DisplayOption.FitToPage
        //},
        panes: {
            filters: {
                visible: false
            },
            pageNavigation: {
                visible: false
            },

        },
        background: models.BackgroundType.Transparent,

        visualSettings: {
            visualHeaders: [
                {
                    settings: {
                        visible: false
                    }
                }
            ]
        }
    }
};

currentVisual.report = powerbi.embed($("#idViewPreview")[0], visualConfig);

//required for untag load event
currentVisual.report.off("loaded");

// Triggers when a report schema is successfully loaded
currentVisual.report.on("loaded", async function () {
    try {
        var newPage = await currentVisual.report.addPage("test_display");
        currentVisual.page = newPage;
        currentVisual.page.setActive();

        let models = window['powerbi-client'].models;

        const customLayout = {
            x: 0,
            y: 0,
            width: 1000,
            height: 800,
            displayState: {
                // Change the selected visuals display mode to visible
                mode: models.VisualContainerDisplayMode.Visible
            }
        };

        currentVisual.visuals = await currentVisual.page.createVisual("funnel", customLayout);
    }
    catch (ex) {
        console.log(ex);
    }

Answer 1

當我們更改頁面大小時，報告將被固定而不是收縮或擴展。 如果我們讓頁面寬度小於報表寬度，可視化報表就會收縮。 但是，當我們更改 div 大小時，iframe 會自動調整報告大小。 如果您想自定義視覺對象的高度和寬度，您可以這樣做。

1. 設置視覺對象的自定義高度和寬度。

    defaultLayout: defaultLayout,
    visualsLayout: {
        "Required_Visual_Name": {
            x: "Required_Width",
            y: "Required_Height",
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        },
    }
};

2.現在更新設置

    layoutType: models.LayoutType.Custom,
    customLayout: {
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: {
            "Your_Report_Id": pageLayout
        }
    },
}

3.應用設置

await report.updateSettings(settings);

參考資料： https://docs.microsoft.com/javascript/api/overview/powerbi/custom-layout

Answer 2

我只是對實際答案進行了一些更改，並將其發布在這里。 在創建視覺對象之前嵌入報告后，我正在更新頁面布局。

    let divWidth = $("div").width() - 10;
    let divHeight = $("div").height() - 10;

    let settings = {
        layoutType: models.LayoutType.Custom,
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: divWidth,
                height: divHeight
            },
            displayOption: models.DisplayOption.FitToPage
        }
    };

    await embedReport.report.updateSettings(settings);

    const customLayout = {
        x: 0,
        y: 0,
        width: divWidth,
        height: divHeight,
        displayState: {
            // Change the selected visuals display mode to visible
            mode: models.VisualContainerDisplayMode.Visible
        }
    };

    await embedReport.page.createVisual("column", customLayout);