在MVC应用程序中将Power BI报表与Angular JS集成

Question

我们如何在现有的MVC应用程序中将Power BI报告与Angular JS集成。目前我面临的问题是在Angular视图上显示Power BI报告。

- rajwinder

Answer 1

走的方法是：使用PowerBI嵌入式（https://azure.microsoft.com/en-us/services/power-bi-embedded/）

我不是Angular专家，但有一个针对此目的的Github仓库：https://github.com/Microsoft/PowerBI-Angular

- Bjoern

Answer 2

请查看http://plnkr.co/edit/tQc1DF?p=info，了解如何使用angular 1.4.x嵌入PowerBI报告并进行页面导航的基本示例。

var app = angular.module('plunker', [
  'powerbi'
]);

app.controller('MainCtrl', function($scope, $http, models, PowerBiService) {

  var staticReportUrl = 'https://powerbiembedapi.azurewebsites.net/api/reports/c52af8ab-0468-4165-92af-dc39858d66ad';


  var _filterPaneEnabled = false;
  var _navContentPaneEnabled = false;
  var _reportHandle = null;

  $scope.tree = [];



  $http.get(staticReportUrl)
    .then(function(responce) {
      //create the config for the directive
      var config = angular.extend(responce.data, {
        settings: {
          filterPaneEnabled: _filterPaneEnabled,
          navContentPaneEnabled: _navContentPaneEnabled
        }
      });
      $scope.embedConfiguration = config;
      //create the nav-tree
      $scope.tree.push(new models.Node(responce.data));


    }, function(reason) {

    });

  $scope.onEmbedded = function(report) {
    // get a reference to report object
    _reportHandle = report;
    //attach to events
    report.on('loaded', OnloadedReport);
    report.on('error', OnErrorReport);
  };

  function OnloadedReport(c) {
    //get available pages to attach to navigation tree
    _reportHandle.getPages()
      .then(function(pages) {
        pages.forEach(function(page) {
          $scope.$apply(function() {
            //populate the nav-tree
            $scope.tree[0].pages.push(new models.Leaf(page));
          });
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  function OnErrorReport(e) {
    console.log(e);
  }


  $scope.toggleFilterPaneClicked = function() {
    _filterPaneEnabled = !_filterPaneEnabled;
    _reportHandle.updateSettings({
      filterPaneEnabled: _filterPaneEnabled
    });
  };

  $scope.toggleNavContentPaneClicked = function() {
    _navContentPaneEnabled = !_navContentPaneEnabled;
    _reportHandle.updateSettings({
      navContentPaneEnabled: _navContentPaneEnabled
    });
  };

  $scope.setPage = function(page) {
    _reportHandle.setPage(page.name);
  };

  $scope.fullScreen = function() {
    _reportHandle.fullscreen();

  };


});


app.factory('models', function() {
  var Node = function(dataset) {
    var self = this;

    self.id = dataset.id;
    self.name = dataset.name;
    self.type = dataset.type;
    self.accessToken = dataset.accessToken;
    self.embedUrl = dataset.embedUrl;
    self.webUrl = dataset.webUrl;
    self.pages = [];

    return self;
  };

  var Leaf = function(page) {
    var self = this;

    self.name = page.name;
    self.displayName = page.displayName;

    return self;
  };

  return {
    Node: Node,
    Leaf: Leaf
  };
})

[1]https://microsoft.github.io/PowerBI-JavaScript/demo/static.html

- gpanagakis