前言
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 安装即可:
npm install powerbi-ng2 --save
安装完成后,添加 powerbi-ng2 到应用程序中:
import { PowerBiModule } from 'powerbi-ng2'; @NgModule({ imports: [ PowerBiModule ] })
快速入门
创建配置
在创建 Power BI 嵌入时,需要传入两个必要参数,以及两个可选参数:
embedConfiguration: { type: 'report', // 可选项:"report" / "dashboard" id: string, // Power BI 工作区的报告或仪表板 ID embedUrl: string, // Power BI 工作区的报告或仪表板 URL tokenType?: models.TokenType, // 可选项:"Embed" / "Aad" accessToken?: string // 嵌入的访问令牌 }
其中,type 参数为 report 或 dashboard,表示嵌入的是报告还是仪表板。id 参数为 Power BI 工作区的报告或仪表板 ID,可以通过 Power BI 门户页面获取。embedUrl 参数为 Power BI 工作区的报告或仪表板 URL。
基础嵌入
使用 powerbi-ng2 进行嵌入非常简单,只需在 HTML 中添加一个 <powerbi-report>
或 <powerbi-dashboard>
标签,然后传入配置即可。
<powerbi-report [embedUrl]="reportEmbedConfig.embedUrl" [accessToken]="reportEmbedConfig.accessToken" [type]="reportEmbedConfig.type" [id]="reportEmbedConfig.id"></powerbi-report>
<powerbi-dashboard [embedUrl]="dashboardEmbedConfig.embedUrl" [accessToken]="dashboardEmbedConfig.accessToken" [type]="dashboardEmbedConfig.type" [id]="dashboardEmbedConfig.id"></powerbi-dashboard>
高级嵌入
在嵌入 Power BI 前,我们可以进行一些自定义的操作,比如获取报告或仪表板的元素信息、修改样式和事件绑定等。以下是一些常用的高级嵌入技巧:
获取元素信息
Power BI 嵌入后,我们可以获取报告或仪表板的 DOM 元素,并且进行操作。
-- -------------------- ---- ------- ------------ --------- ------------------ ------------ ------------------------------- ---------- ------------------------------- -- ------ ----- ------------------- ---------- ------ - ----------------------- - ------- ---- -- ---------- ----------- ---------- - ----- ------------- - ----------------------------- ----- ------ - ---------------------------- ------------------------ ------------------- -- -- - ----- ----- - ------------------ -- ------- --------------------------- -- ----- -------------------------------- -- ---------------------- -- ------- --- - -
在页面 HTML 中,我们需要为 powerbi-report
标签添加一个本地引用,并用 @ViewChild
装饰器将其注入到组件中,以便获取元素信息。
<powerbi-report #reportDiv [embedUrl]="reportEmbedConfig.embedUrl" [accessToken]="reportEmbedConfig.accessToken" [type]="reportEmbedConfig.type" [id]="reportEmbedConfig.id"></powerbi-report>
修改样式
如果想要为 Power BI 报告或仪表板添加一些自定义样式,可以使用 Power BI 提供的 applyTheme
方法,并传入修改的样式对象。
-- -------------------- ---- ------- ----- ----------- - - ---------- - ------------- - ---- - ---- - - ----- ---- ------ - --------- ------ - -- - ----- ---- ------ - ----------- ------ - -- - ----- ---- ------ - ------ ------ - -- - ----- ---- ------ - ---------------- --------- - -- - - - - -- -------------------------------
事件绑定
使用 Power BI API,可以绑定 Power BI 报告或仪表板中的事件。以下是常用的事件类型:
loaded
: 报告或仪表板加载完成时触发。error
: 报告或仪表板加载失败时触发。dataSelected
: 用户选择报表元素时触发
const report = powerbi.embed(reportElement, this.reportEmbedConfig); report.on('dataSelected', (event: any) => { console.log('Data selected: ', event.detail); });
常见问题
1. 如何获取 Power BI 工作区的报告或仪表板 ID?
在 Power BI 门户中,进入你要嵌入的报告或仪表板,从浏览器地址栏中获取报告或仪表板的 ID。
2. 如何自定义 Power BI 嵌入时,调整 iframe 高度?
powerbi-ng2 为每个嵌入的报告或仪表板提供了一个默认的高度。如果您需要调整高度以适应页面布局,可以使用 CSS 或 JavaScript 来控制嵌入的 iframe
元素的高度。
.powerbi-frame { height: 500px !important; // 设置高度 }
const reportElement = this.reportDiv.nativeElement; const report = powerbi.embed(reportElement, this.reportEmbedConfig); report.on('loaded', () => { const iFrameElement = report.getElement(); iFrameElement.style.height = '500px'; // 设置高度 });
结语
以上就是 powerbi-ng2 的基本使用方法和常见问题解决方法,希望本文能够对您的 AngularJS 2.x 开发工作有所帮助。如果您对 Power BI 的嵌入还有其他问题或需求,也欢迎在评论区留言,让我们一起学习和进步。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055e3481e8991b448dbb0f