npm 包 qliksense-extension 使用教程

阅读时长 7 分钟读完

qliksense-extension 是一个基于 Qlik Sense 的可视化扩展库,可以帮助开发者在 Qlik Sense 应用中创建自定义的可视化组件。本文将介绍如何在前端开发中使用 qliksense-extension npm 包,以及如何创建自定义可视化组件。

安装 qliksense-extension 包

首先,我们需要安装 qliksense-extension npm 包。你可以使用以下命令在你的项目中安装该包:

安装完成后,你需要引入该包到你的应用程序中:

创建自定义可视化组件

接下来,我们将创建一个基于 qliksense-extension 的自定义可视化组件。首先,你需要创建一个 HTML 文件,该文件将作为你的自定义可视化组件的模板:

接下来,你需要创建一个 JavaScript 文件,该文件将作为你的自定义可视化组件的代码:

-- -------------------- ---- -------
---------------
  ------- -------- -- -
    ------------- - -------------------
    ----------- - ---------------
    ----------- - ---------------

    --------------- - ------------------------
  --

  ------ -------- - --------- ------ - -
    -------------------------------
    -------------------------------
  -
---

在上面的代码中,我们使用 qliksense.ext() 方法来定义自定义可视化组件。我们在该方法的 define 回调函数中定义了该组件的元素和后端 API。我们在 paint 回调函数中定义了该组件的样式和布局。

使用自定义可视化组件

完成上述步骤后,我们现在可以在 Qlik Sense 应用中使用自定义可视化组件了。我们需要创建一个 Qlik Sense 的可视化插件,并在插件中引用我们的自定义可视化组件。

我们可以使用下面的代码来创建一个 Qlik Sense 的可视化插件:

-- -------------------- ---- -------
---- -------------------------------
  ---- ------------------
    ---- ------------------------
      ---- ---------------------
        --- ----------------------
        ---- -----------------------
      ------
    ------
  ------
------

我们可以使用 qliksense.createExtension() 方法来构建该插件,并在该插件中引用我们的自定义可视化组件:

上面的代码中,我们使用 qliksense.createExtension() 方法来创建可视化插件。在该方法的回调函数中,我们可以构建我们的自定义可视化组件,并在该组件中引用该插件。

示例代码

下面是一个完整的示例,帮助你更好地了解如何使用 qliksense-extension 包创建自定义可视化组件:

index.html

-- -------------------- ---- -------
--------- -----
------
  ------
    -------------------------- ------------
    ----- ---------------- ------------------
  -------
  ------
    ---- -------------------------------
      ---- ------------------
        ---- ------------------------
          ---- ---------------------
            --- ----------------------
            ---- -----------------------
          ------
        ------
      ------
    ------

    ------- --------------------------------------------------------------------------------------
    ------- ---------------------------------------------------------------------------------
    ------- --------------------------
  -------
-------

styles.css

-- -------------------- ---- -------
------------- -
  ----------- -----------
  ------ -----
  ------- -----
  -------- -----
  --------------- -------
  ---------------- -------
  ------------ -------
  ----------------- --------
  -------- -----
-

--------- -
  ---------- -----
  ------------ -----
  -------------- -----
-

--------- -
  ------ -----
  ------- ------
  ----------------- -----
-

scripts.js

-- -------------------- ---- -------
---------------- ----------------------- -------- ------ ---------- -
  -- ------ ---------
  ---------------
    ------- -------- -- -
      ------------- - -------------------
      ----------- - ---------------
      ----------- - ---------------

      --------------- - ------------------------
    --

    ------ -------- - --------- ------ - -
      -------------------------------
      -------------------------------
    -
  ---

  -- ------ ---------
  -------------------------------------- ---------- -
    ------ -
      --------------
      ------------------------ ------- -
        ----------------------------------------- -------- ---------- ------- ----------- -
          -- ------ ---- --------- ----
        -- -
          -- ---------- ------- ----
        ---
      -
    -
  ---
---

本文详细介绍了如何在前端开发中使用 qliksense-extension npm 包,并创建自定义可视化组件。这为开发者打造定制化的 Qlik Sense 应用提供了更多的可能性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005516881e8991b448cea2e

纠错
反馈