简介
在前端开发中，数据可视化是一个非常重要的部分。Power BI 是微软提供的一款业界领先的商业智能工具，它支持直观的数据可视化展示和互动式的数据分析。angular2-powerbi 就是一款使用 Angular2 框架封装了 Power BI 的 npm 包。使用 angular2-powerbi 可以更加简单地在 Angular2 应用中嵌入 Power BI 组件并实现数据可视化的效果。
本教程将详细介绍如何使用 npm 包 angular2-powerbi 来实现数据可视化效果。读者需要掌握 Angular2 的基础知识并完成 Angular2 应用的开发环境部署。
安装
使用 angular2-powerbi 前需要先安装依赖的库，通过 npm 安装 Power BI npm 包和 angular2-powerbi 组件库：
npm install powerbi-client npm install angular2-powerbi
使用
导入模块
在 app.module.ts 中导入 PowerBIModule，以及 PowerBITileComponent：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - -------------------- - ---- -------------------
-----------
-------- -
-------------
--
------------- -
--------------------
-
--
------ ----- --------- --配置参数
在组件中配置 Power BI 组件的参数，例如 Power BI 仪表盘的 ID 以及 Power BI Embedded 的应用 ID：
-- -------------------- ---- -------
------ - ----------------------------------- - ---- -----------------
------------
--------- -------------------
--------- -------------- ---------------- ------------------------------------
--
------ ----- -------------------- -
--- - --------------------------------------------------------------
-------- ----------------------------------- - -
----- ------------
---------- --
------------ --
---------- -----
------------ --------------------
-------- -
-
----- ------ ------
-
-
---
--
-渲染模板
在组件的模板中加入 PowerBI 组件，渲染 Power BI 仪表盘：
<powerbi-tile [embedUrl]="url" [options]="options"></powerbi-tile>
示例代码
在下面的示例代码中，使用 Angular2 框架封装了 Power BI 仪表盘并展示了销售数据的可视化效果。
app.component.ts
在 app.component.ts 中通过 ViewChild 获取到 MyDashboardComponent，并在 ngOnInit() 方法中配置 Power BI 组件的参数：
-- -------------------- ---- -------
------ - ---------- ---------- ------- ------------- - ---- ----------------
------ - ----------------------------------- - ---- -----------------
------ - -------------------- - ---- ----------------------------------------
------------
--------- -----------
--------- ----- --------------------
--
------ ----- ------------ ---------- ------- ------------- -
------------------------- -------- ------- ------------ ---------------------
---------- -
---
-- -- ----- -- -----
-------------------- - --------------------------------------------------------------
------------------------ - -
----- ------------
---------- --
------------ --
---------- -----
------------ --------------------
-------- --
---
--
--
-
----------------- -
----- ------- - ---------------
-- --------- -
-- -- ----- -- --
----- ------- - -------------------------------------------
---------------------- --------------------------
-
-
-my-dashboard.component.ts
MyDashboardComponent 的模板中加入 PowerBI 组件：
<div #powerBITile> <powerbi-tile [embedUrl]="url" [options]="options"></powerbi-tile> </div>
总结
使用 npm 包 angular2-powerbi 可以更加方便地在 Angular2 应用中嵌入 Power BI 组件并实现数据可视化的效果。本教程介绍了如何安装相关库、导入模块、配置参数和渲染模板，读者只需要遵循这些步骤就可以轻松使用 angular2-powerbi 在 Angular2 应用中展示自己的数据可视化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e6581e8991b448dbc91