npm 包 powerbi-ng2 使用教程

阅读时长 7 分钟读完

前言

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

纠错
反馈