PowerBI嵌入式垂直滚动条不可见

Question

我已经嵌入了一个PowerBI报告。这是页面设置的Javascript代码。

由于某种原因，我的报告中没有出现垂直滚动条。当我在在线工作区打开它时，滚动条完全正常。我已经尝试在PowerBI中切换不同的“视图”选项，但似乎并没有什么区别。

<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>

- Elmer

Answer 1

在customLayout对象中添加"displayOption"属性并将其值设置为"FitToWidth"，这个选项会尝试根据页面可用总大小来适应报表，并在必要时引入滚动条来显示剩余部分。

同时，在pageSizeType对象中将"Widescreen"更改为"Custom"。

所有更改完成后，您的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://learn.microsoft.com/zh-cn/javascript/api/overview/powerbi/custom-layout

- Parth Mangukiya