如何通过嵌入power bi的报告视觉效果摆脱灰色边框?

时间:2018-03-19 07:57:10

标签: powerbi-embedded

当我渲染power bi视觉效果时,我注意到图像的左右两侧有一个灰色边框。有没有办法摆脱它? enter image description here

灰色边框不会影响iframe的顶部或底部,这很尴尬。

谢谢, 德里克

2 个答案:

答案 0 :(得分:7)

尝试这样的事情。 (从powerbi-javascript示例中提取)。将#reportContainer div作为输入传递给powerbi.embed,你不应该看到插入边框



    <style>
    #reportContainer {
        width: 100%;
        height: 750px;
        background-color: white;
        padding: 0px;
        clear: both;
    }
    .desktop-view iframe, .mobile-view iframe {
        border: none;
    }
</style>
<h2>Sample PowerBI Embedded Report</h2>
<div class="desktop-view" style="display: block;">
    <div id="reportContainer"></div>
</div>
&#13;
&#13;
&#13;

Result

对于报告,您可以执行以下操作以使背景透明(以及FitToWidth)。

                var embedConfig = {
                    type: type,
                    id: id,
                    embedUrl: embedUrl,
                    viewMode: getViewModeFromModel(viewMode),
                    tokenType: models.TokenType.Aad,
                    accessToken: token,
                    pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                    pageName: pageName,

                    // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                    settings: {
                        filterPaneEnabled: true,
                        navContentPaneEnabled: true,
                        background: models.BackgroundType.Transparent,
                        // START Report specific settings
                        layoutType: models.LayoutType.Custom,
                        customLayout: {
                            displayOption: models.DisplayOption.FitToWidth
                        }
                        // END Report specific settings
                    }
                }

答案 1 :(得分:3)

只需添加此CSS代码即可通过powerbi删除生成的iframe的边框。对我来说很完美

<style>
  iframe {  border: none; }
</style>