简介
birst-react-embed 是一个基于 React 的 npm 包,用于将 Birst 的 BI 分析报表嵌入 web 应用程序中。Birst 是一种云 BI 工具,可以用来分析、建立和共享业务智能数据。
使用 birst-react-embed,您可以轻松地将 Birst 报表嵌入您的 web 应用程序中,同时保持您的应用程序的 React 风格和设计。
安装
要安装 birst-react-embed,您需要首先安装 npm 和 Node.js。然后,通过运行以下命令,可以将 birst-react-embed 安装到您的应用程序中。
--- ------- ----------------- ------
使用
在您的 React 组件中使用 birst-react-embed,您需要首先将其引入并将其添加到您的组件中,如下所示:
------ ------ - --------- - ---- -------- ------ -------- ---- ------------ ------ ---------- ---- -------------------- ----- ----------- ------- --------- - -------- - ------ - ----- ----------- ---------- ----- ------ ----- --------------- ----- ---------- --------------- ----- ---------- -- ------ -- - - ---------------------------- --- ---------------------------------
在这个例子中,您需要用您自己的 Birst 报告 URL、用户名和密码来替换 <your Birst report URL>
、<your Birst username>
和 <your Birst password>
。
接下来,您可以将您的 React 应用程序从本地服务器上运行,然后在浏览器中打开它,您应该能够看到您的 Birst 报表被嵌入到您的 React 应用程序中了。
高级用法
如果您需要更多的控制和自定义选项,birst-react-embed 还有一些可选属性可以使用。
属性
以下是 birst-react-embed 的可选属性:
url
: (string) Birst 报告的 URL。username
: (string) Birst 用户名。password
: (string) Birst 密码。reportId
: (string) Birst 报表 ID。width
: (string) 报表宽度。height
: (string) 报表高度。isMobile
: (boolean) 是否在移动设备上加载报表。sandbox
: (boolean) 是否启用沙箱模式。
示例代码
下面是一个完整的示例代码,展示如何使用 birst-react-embed 在 React 应用程序中嵌入 Birst 报表。
------ ------ - --------- - ---- -------- ------ -------- ---- ------------ ------ ---------- ---- -------------------- ----- ----------- ------- --------- - -------- - ------ - ----- ----------- --------------------------------------- --------------------- --------------------- --------------------- ----------- ------------ ---------------- -------------- -- ------ -- - - ---------------------------- --- ---------------------------------
结论
birst-react-embed 是一个非常有用的 npm 包,它可以轻松地将 Birst 报表嵌入到您的 React 应用程序中。使用本文中提到的方法,您现在可以轻松地开始使用 birst-react-embed,以便在您的应用程序中添加业务智能数据分析。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562eb81e8991b448e09c4