qliksense-extension 是一个基于 Qlik Sense 的可视化扩展库,可以帮助开发者在 Qlik Sense 应用中创建自定义的可视化组件。本文将介绍如何在前端开发中使用 qliksense-extension npm 包,以及如何创建自定义可视化组件。
安装 qliksense-extension 包
首先,我们需要安装 qliksense-extension npm 包。你可以使用以下命令在你的项目中安装该包:
npm install qliksense-extension --save
安装完成后,你需要引入该包到你的应用程序中:
import qlik from 'qlik' import qliksense from 'qliksense-extension'
创建自定义可视化组件
接下来,我们将创建一个基于 qliksense-extension 的自定义可视化组件。首先,你需要创建一个 HTML 文件,该文件将作为你的自定义可视化组件的模板:
<div class="my-extension"> <h1 class="my-title"></h1> <div class="my-chart"></div> </div>
接下来,你需要创建一个 JavaScript 文件,该文件将作为你的自定义可视化组件的代码:
-- -------------------- ---- ------- --------------- ------- -------- -- - ------------- - ------------------- ----------- - --------------- ----------- - --------------- --------------- - ------------------------ -- ------ -------- - --------- ------ - - ------------------------------- ------------------------------- - ---
在上面的代码中,我们使用 qliksense.ext() 方法来定义自定义可视化组件。我们在该方法的 define 回调函数中定义了该组件的元素和后端 API。我们在 paint 回调函数中定义了该组件的样式和布局。
使用自定义可视化组件
完成上述步骤后,我们现在可以在 Qlik Sense 应用中使用自定义可视化组件了。我们需要创建一个 Qlik Sense 的可视化插件,并在插件中引用我们的自定义可视化组件。
我们可以使用下面的代码来创建一个 Qlik Sense 的可视化插件:
-- -------------------- ---- ------- ---- ------------------------------- ---- ------------------ ---- ------------------------ ---- --------------------- --- ---------------------- ---- ----------------------- ------ ------ ------ ------
我们可以使用 qliksense.createExtension() 方法来构建该插件,并在该插件中引用我们的自定义可视化组件:
qliksense.createExtension('my-extension', function ($element, layout, backendApi) { // create your extension here }, { // additional options here });
上面的代码中,我们使用 qliksense.createExtension() 方法来创建可视化插件。在该方法的回调函数中,我们可以构建我们的自定义可视化组件,并在该组件中引用该插件。
示例代码
下面是一个完整的示例,帮助你更好地了解如何使用 qliksense-extension 包创建自定义可视化组件:
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------------- ------------ ----- ---------------- ------------------ ------- ------ ---- ------------------------------- ---- ------------------ ---- ------------------------ ---- --------------------- --- ---------------------- ---- ----------------------- ------ ------ ------ ------ ------- -------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------- ------- -------------------------- ------- -------
styles.css
-- -------------------- ---- ------- ------------- - ----------- ----------- ------ ----- ------- ----- -------- ----- --------------- ------- ---------------- ------- ------------ ------- ----------------- -------- -------- ----- - --------- - ---------- ----- ------------ ----- -------------- ----- - --------- - ------ ----- ------- ------ ----------------- ----- -
scripts.js
-- -------------------- ---- ------- ---------------- ----------------------- -------- ------ ---------- - -- ------ --------- --------------- ------- -------- -- - ------------- - ------------------- ----------- - --------------- ----------- - --------------- --------------- - ------------------------ -- ------ -------- - --------- ------ - - ------------------------------- ------------------------------- - --- -- ------ --------- -------------------------------------- ---------- - ------ - -------------- ------------------------ ------- - ----------------------------------------- -------- ---------- ------- ----------- - -- ------ ---- --------- ---- -- - -- ---------- ------- ---- --- - - --- ---
本文详细介绍了如何在前端开发中使用 qliksense-extension npm 包,并创建自定义可视化组件。这为开发者打造定制化的 Qlik Sense 应用提供了更多的可能性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005516881e8991b448cea2e