PowerBI Embedded 垂直滚动条不可见

Question

我嵌入了 PowerBI 报告。这是带有页面设置的Javascript。

出于某种原因，我的报告中没有垂直滚动条。当我在工作区在线打开它时，滚动条工作得很好。我已经尝试在 PowerBi 中的不同 'View' 选项之间切换，但这似乎没有什么不同。

<H2>PowerBI</H2>
<p><i>User: {{username}} | AccessLevel: {{access_level}}</i></p>
<div id="reportContainer" style="height: 80vh;"></div>

<script type="text/javascript">
window.onload = function () {
 
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: '{{txtembedreportid}}',
    embedUrl: '{{txtreportembed}}',
    tokenType: models.TokenType.Embed,
    accessToken: '{{txtaccesstoken}}',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                pageSize: {
                    type: models.PageSizeType.Widescreen,
                }
            },
            panes:{
                bookmarks: {
                    visible: false
                },
                fields: {
                    expanded: false
                },
                filters: {
                    expanded: false,
                    visible: false
                },
                pageNavigation: {
                    visible: true
                },
                selection: {
                    visible: true
                },
                syncSlicers: {
                    visible: true
                },
                visualizations: {
                    expanded: false
                }
           }
    }
};

var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
report.fullscreen(); 
            }
</script>

Answer 1

尝试在 customLayout 对象中添加值为“FitToWidth”的“displayOption”属性，因为此选项将尝试根据页面的总可用大小来调整报表，并为如有必要，剩下的部分。

同时将 pageSizeType 对象中的“宽屏”更改为“自定义”

所有更改后，您的 embedConfiguration 将如下所示。

var embedConfiguration = {
    type: 'report',
    id: '{{txtembedreportid}}',
    embedUrl: '{{txtreportembed}}',
    tokenType: models.TokenType.Embed,
    accessToken: '{{txtaccesstoken}}',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                displayOption: models.DisplayOption.FitToWidth, // Add "FitToWidth"
                pageSize: {
                    type: models.PageSizeType.Custom, // Change to "Custom"
                }
            },
            panes:{
                bookmarks: {
                    visible: false
                },
                fields: {
                    expanded: false
                },
                filters: {
                    expanded: false,
                    visible: false
                },
                pageNavigation: {
                    visible: true
                },
                selection: {
                    visible: true
                },
                syncSlicers: {
                    visible: true
                },
                visualizations: {
                    expanded: false
                }
           }
    }
};

参考文档：https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/custom-layout

PowerBI Embedded 垂直滚动条不可见

PowerBI Embedded vertical scrollbar not visible

html

javascript

css

powerbi

powerbi-embedded