在可视化加载期间隐藏 Power BI 徽标

Question

Microsoft 已宣布可以关闭加载报表时显示的加载图像。

正在加载图片

Use the Power BI Embedded JavaScript SDK to hide the flickering Power BI logo that appears when a report is loaded. - power-bi-embedded-feature-hide-the-power-bi-logo-during-visualization-load

但是我在任何 JS SDK 文档或任何在线示例中都找不到任何提及。

有人做到了吗？

Answer 1

目前无法删除 PowerBI 加载符号。建议输入您自己的自定义徽标是个好主意

Answer 2

即使在您引用的文章中，推荐的方法是 - 1.隐藏iframe（或包含它的div） 2. 在使用（分阶段加载）[https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API] 或 rendered 时收听 loaded 事件，否则 3. 显示您之前隐藏的 div，瞧 - 嵌入式 power bi 已经加载..

Answer 3

首先添加一个你想要的 gif 而不是 Power BI 徽标。您可以将其添加到 div 元素中。该元素将与包含报告的 div 元素重叠。 HTML 代码如下所示：

<div id="container">
     <div id="overlay">
         <img id="spinner" alt="Alternate Text" src="image/giphy.gif"/>
     </div>
     <div id="embedContainer" style="height: 600px; width: 100%; max-width: 1400px;">
     </div>
 </div>

添加 gif 后。现在，更改 JavaScript 代码。所以你最终的 JavaScript 嵌入代码将是：

<script type="text/javascript">
    // Read embed token
    var embedToken = "<% =this.embedToken %>";
    // Read embed URL
    var embedUrl = "<% = this.embedUrl %>";
        // Read report Id
        var reportId = "<% = this.reportId %>";

    // Get models (models contains enums)
    var models = window['powerbi-client'].models;

    // Embed configuration is used to describe what and how to embed
    // This object is used when calling powerbi.embed
    // It can also include settings and options such as filters
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: embedToken,
        embedUrl: embedUrl,
        id: reportId,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

    $("#embedContainer").css("visibility", "hidden");

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#embedContainer')[0];


    // Embed the report within the div element
    var report = powerbi.embed(reportContainer, config);

    report.on("loaded", function (event) {
        $("#overlay").hide();
        $("#embedContainer").css("visibility", "visible");

        report.off("loaded");

    })


</script>

您还可以添加 CSS 以使您的 gif 与您的报告保持一致：

<style>
        #container{
            position:absolute;
            width: 1400px;
            height:600px;
        }

        #overlay{
            position:absolute;
            width:inherit;
            height:inherit;
        }

        #spinner{
            display: block;
            margin-top:10%;
            margin-left: auto;
            margin-right: auto;
            width:10%;
            height: 10%;

        }
</style>

另外，可以参考以下youtube link：https://www.youtube.com/watch?v=YhjtunTmnbw。本视频来自 Power BI 官方 YouTube 账号。在此视频中，您可以了解如何使用 Power BI Embedded 在您的应用程序中获得白标嵌入式分析。了解如何在加载或呈现事件之前隐藏 Power BI 徽标，以及如何在加载阶段使用个性化徽标。

在可视化加载期间隐藏 Power BI 徽标

Hide the Power BI logo during visualization load

powerbi

powerbi-embedded