PowerBi使用JavaScript嵌入仪表板

时间:2017-09-21 18:30:20

标签: javascript powerbi powerbi-embedded

我在PowerBi中创建了一个仪表板,我可以使用示例项目在.cs页面中加载,但我想尝试使用JavaScript API。我尝试使用该项目[GitHub示例项目https://github.com/Microsoft/PowerBI-JavaScript]但是我得到关于模型的错误是否有我将使用的不同功能?我相信我已经安装了所有的js库,但仪表板不会加载到我的html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.js"></script>
    <script src="scripts/step_interact.js"></script>
    <script src="scripts/step_embed.js"></script>
    <script src="scripts/step_authorize.js"></script>
    <script src="/bower_components/powerbi-client/dist/powerbi.js"></script>
    <script>

    $(document).ready(function () {

        // Get models. models contains enums that can be used.
        var models = window['powerbi-client'].models;

        var embedConfiguration = {
            type: 'dashboard',
            id: 'dashboardID',
            embedUrl: 'https://app.powerbi.com/reportEmbed',
            tokenType: models.TokenType.Aad,
            accessToken: 'TokenString'
        };

        var $dashboardContainer = $('#embedContainer');
        var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);
    });

    </script>
    </head >
            <body>
                <div id="embedContainer"></div>         
</body >
</html >

4 个答案:

答案 0 :(得分:1)

一些事情:

  1. 通过查看您引用的powerbi.js文件,尝试更改以下行: var models = window['powerbi-client'].modelsvar models = window.powerbi.models

  2. 确保使用正确的embedURL,当您使用/ dashboardEmbed时,您正在使用/ reportEmbed。

  3. 最终,您的代码看起来应该是这样的:

    $(document).ready(function () {
    
            // Get models. models contains enums that can be used.
            var models = powerbi.models; // or window.powerbi.models
    
            var embedConfiguration = {
                type: 'dashboard',
                id: 'dashboardID',
                embedUrl: 'https://app.powerbi.com/dashboardEmbed',
                tokenType: models.TokenType.Aad,
                accessToken: 'TokenString'
            };
    
            var $dashboardContainer = $('#embedContainer');
            var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);
        });

答案 1 :(得分:0)

您可以尝试使用Javascript显示PowerBI仪表板。所有,您需要的是有效的访问令牌和dashboardId。

&#13;
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您需要将模型初始化更改为此:

import * as pbi from 'powerbi-client'


const models = pbi.models

而不是使用此示例:

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

答案 3 :(得分:0)

确保已在“ Power BI App注册工具”中将您的确切URL注册为重定向URL。下面的代码在设置了正确的重定向URL后将可以正常工作。

var models = window['powerbi-client'].models
相关问题