前言
Power BI 是由微软公司推出的一款商业智能工具，主要用于数据分析和可视化呈现，同时也支持大规模数据集成和数据处理。而 powerbi-ng2 就是一个基于 Power BI Embed API 的 npm 包，提供了在 AngularJS 2.x 中集成 Power BI 的功能。
相比于原生的 Power BI Embed API，powerbi-ng2 更加方便、易用，使得开发人员能够更加快速的集成和应用 Power BI 在自己的 AngularJS 2.x 项目中。
本文主要介绍 powerbi-ng2 的基本使用方法和常见问题解决方法。
安装
安装 powerbi-ng2 的方式很简单，直接通过 npm 安装即可：
--- ------- ----------- ------
安装完成后，添加 powerbi-ng2 到应用程序中：
------ - ------------- - ---- --------------
-----------
-------- -
-------------
-
--快速入门
创建配置
在创建 Power BI 嵌入时，需要传入两个必要参数，以及两个可选参数：
------------------- - ----- --------- -- ------------ - ----------- --- ------- -- ----- -- ---------- -- --------- ------- -- ----- -- ---------- --- ----------- ----------------- -- ----------- - ----- ------------- ------ -- ------- -
其中，type 参数为 report 或 dashboard，表示嵌入的是报告还是仪表板。id 参数为 Power BI 工作区的报告或仪表板 ID，可以通过 Power BI 门户页面获取。embedUrl 参数为 Power BI 工作区的报告或仪表板 URL。
基础嵌入
使用 powerbi-ng2 进行嵌入非常简单，只需在 HTML 中添加一个 <powerbi-report> 或 <powerbi-dashboard> 标签，然后传入配置即可。
--------------- --------------------------------------- --------------------------------------------- ------------------------------- ---------------------------------------------
------------------ ------------------------------------------ ------------------------------------------------ ---------------------------------- ---------------------------------------------------
高级嵌入
在嵌入 Power BI 前，我们可以进行一些自定义的操作，比如获取报告或仪表板的元素信息、修改样式和事件绑定等。以下是一些常用的高级嵌入技巧：
获取元素信息
Power BI 嵌入后，我们可以获取报告或仪表板的 DOM 元素，并且进行操作。
------------
--------- ------------------
------------ -------------------------------
---------- -------------------------------
--
------ ----- ------------------- ---------- ------ -
----------------------- - ------- ---- -- ---------- -----------
---------- -
----- ------------- - -----------------------------
----- ------ - ---------------------------- ------------------------
------------------- -- -- -
----- ----- - ------------------ -- -------
--------------------------- -- -----
-------------------------------- -- ---------------------- -- -------
---
-
-在页面 HTML 中，我们需要为 powerbi-report 标签添加一个本地引用，并用 @ViewChild 装饰器将其注入到组件中，以便获取元素信息。
--------------- ---------- --------------------------------------- --------------------------------------------- ------------------------------- ---------------------------------------------
修改样式
如果想要为 Power BI 报告或仪表板添加一些自定义样式，可以使用 Power BI 提供的 applyTheme 方法，并传入修改的样式对象。
----- ----------- - -
---------- -
------------- -
---- -
---- -
- ----- ---- ------ - --------- ------ - --
- ----- ---- ------ - ----------- ------ - --
- ----- ---- ------ - ------ ------ - --
- ----- ---- ------ - ---------------- --------- - --
-
-
-
-
--
-------------------------------事件绑定
使用 Power BI API，可以绑定 Power BI 报告或仪表板中的事件。以下是常用的事件类型：
loaded: 报告或仪表板加载完成时触发。error: 报告或仪表板加载失败时触发。dataSelected: 用户选择报表元素时触发
----- ------ - ---------------------------- ------------------------
------------------------- ------- ---- -- -
----------------- --------- -- --------------
---常见问题
1. 如何获取 Power BI 工作区的报告或仪表板 ID？
在 Power BI 门户中，进入你要嵌入的报告或仪表板，从浏览器地址栏中获取报告或仪表板的 ID。
2. 如何自定义 Power BI 嵌入时，调整 iframe 高度？
powerbi-ng2 为每个嵌入的报告或仪表板提供了一个默认的高度。如果您需要调整高度以适应页面布局，可以使用 CSS 或 JavaScript 来控制嵌入的 iframe 元素的高度。
-------------- - ------- ----- ----------- -- ---- -
----- ------------- - -----------------------------
----- ------ - ---------------------------- ------------------------
------------------- -- -- -
----- ------------- - --------------------
-------------------------- - -------- -- ----
---结语
以上就是 powerbi-ng2 的基本使用方法和常见问题解决方法，希望本文能够对您的 AngularJS 2.x 开发工作有所帮助。如果您对 Power BI 的嵌入还有其他问题或需求，也欢迎在评论区留言，让我们一起学习和进步。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055e3481e8991b448dbb0f