只需几行代码，即可使用 Qlik Playground 和 Visualization API 创建和嵌入可视化

什么是 Qlik？

在这个展示中，我们将向您展示使用 Qlik Playground 和 Visualization API 创建和嵌入可视化效果是多么容易。

为了做到这一点，我们需要运行通过简单的步骤来启动并运行 Playground。

如果您以前从未使用过 Qlik，它是一家数据分析和可视化软件公司，采用极其强大的技术来构建可视化效果、仪表板和 Web 应用程序，从而可以探索数据并深入了解数据。 Qlik 最近开放了一个名为“Qlik Playground”的免费编程环境，您可以在其中试用他们的功能。 要遵循此演示，您需要先使用您的 GitHub 登录名或电子邮件地址登录 www.playground.qlik.com。

关于 Visualization API

Playground 的 Visualization API 是一个名为“Capability APIs”的集合的一部分。 这些是 JavaScript API，可让您将 Qlik 图表和可视化效果嵌入到网页中。 您可以使用 Visualization API 仅使用几行代码即可利用 Qlik 可视化库。

此库中的可视化效果是完全交互式的，因此无需编写任何其他代码。 在后台，Qlik 的分析引擎会负责维护关联、状态选择和数据关系。 它在内存中完成所有这些操作，这使得它非常快。

入门

要启动并运行，您可以从 GitHub 下载 Capability APIs 模板，这样您可以跳过通常的身份验证和连接步骤。 它还为您提供了一个良好的 html 页面开端。

您需要安装 Node，安装后，您可以通过 6 个简单的步骤在您的本地计算机上运行一个项目。

只需

1. 从 Playground 中选择一个 示例数据集，然后单击“试用”。
2. 从“模板”部分 Git 克隆或下载 Capability APIs 模板。
3. 导航到新文件夹并从命令行运行“npm install”。 这将安装项目所需的模块。
4. 编辑 resources 目录中的script.js文件。 将顶部的空 config 变量替换为提供的代码，该代码应如下所示

   var config= { 
       host:"playground.qlik.com", 
       prefix:"/playground/", 
       port:"443", 
       isSecure:true, 
       rejectUnauthorized:false, 
       apiKey:"[PERSONAL API KEY PROVIDED ON PAGE]", 
       appname:"[YOUR CHOSEN APP’S NAME]" 
       };

   此代码包含您的 API 密钥和应用程序名称。

5. 在命令行中运行“node index”。 您会看到此消息：监听端口 8000。您的服务器现在正在运行。
6. 打开浏览器并转到https://:8000。 您不会在页面上看到任何内容（您尚未构建它，请继续关注），但该应用程序现在正在您的本地计算机上运行。

resources 目录中的 script.js 文件也是您运行可视化代码的地方，如下所述。 打开此文件并在读取以下行的下方开始编码

var app = qlik.openApp(config.appname, config);

Visualization API - create() 方法

要创建新的可视化效果，我们使用 create 方法。 create() 方法接受以下参数 -

• type（字符串）- 要显示的可视化类型
  • 柱状图
  • 组合图
  • 仪表盘
  • Kpi
  • 折线图
  • 饼图
  • 透视表
  • 散点图
  • 表格
  • 树状图
• columns（数组）- 要使用的维度和度量定义列表
• options（对象）- （可选）其他属性也可以在此处设置

create() 方法返回一个 promise，其中包含 QVisualization 类型的单个参数。

QVisualization 有一个 show() 方法，用于将可视化效果附加到页面上的 HTML 元素。 show() 方法接受一个参数 -

• element (element | string) - HTML 元素或元素 Id

示例

app.visualization.create('barchart', ['Month', '=Count(Day)']).then(function(vis){
    vis.show("myElementId")
});

少量代码将神奇地创建您的新图表，该图表现在将出现在您正在运行的 capability 模板上。 这是您的结果示例：一个只需几行代码即可嵌入的交互式图表。