npm 包 birst-react-embed 使用教程

阅读时长 4 分钟读完

简介

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

纠错
反馈

纠错反馈