Tableau

本文档提供有关设置 Tableau 连接配置

支持的Tableau版本

  • Tableau Desktop

  • Tableau Server

  • Tableau Online

前言

Tapdata 企业版支持通过 Rest API 的方式发布数据。 我们可以使用 tableau 从 tapdata api server上获取数据。

您可以使用 Web Data Connector ,通过 HTTP 的方式来连接尚未具有连接器的数据。

Web Data Connector 是包含 JavaScript 代码的 HTML 文件。 您可以创建自己的 Web Data Connector,也可以使用其他人创建的连接器。

Web Data Connector 必须托管在计算机本地,域中的 Web 服务器或第三方 Web 服务器上运行的 Web 服务器上。

先决条件

获取 WDC 的 SDK

在要下载 WDC SDK 的目录中打开终端。 然后运行以下命令以克隆 WDC git 项目:

git clone https://github.com/tableau/webdataconnector.git

切换到项目目录:

cd webdataconnector

运行web服务

使用npm安装依赖项:

npm install --production

注意:您必须使用 administrator 或 sudo 权限运行该命令。

启动测试Web服务器:

npm start

打开浏览器并导航到以下URL:

http://localhost:8888/Simulator/index.html

出现WDC页面

配置 WDC 服务

自定义WDC数据

  1. 在WDC URL字段中,确认URL已设置为示例USGS Earthquake Data连接器:../Examples/html/earthquakeUSGS.html 或者,查看 Examples 目录以获取更多示例连接器。

  2. 单击“Start Interactive Phase”按钮以显示地震WDC的用户界面。

  3. 单击“Get Earthquake Data”按钮。

  4. 单击“Fetch Table Data”按钮以下载数据并将其显示在表中。

自定义 HTML 和 JS 来处理 Rest API 数据

步骤一:

创建一个名为 tapdataWDC.html 的新文件,并将其保存在 webdataconnector 存储库的顶级目录中。 有关详细信息,您可以参考:WDC Tutorial🔗

tapdataWDC.html
<html>
<head>
<title>USGS Earthquake Feed</title>
<meta http-equiv="Cache-Control" content="no-store" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
<script src="tapdataWDC.js" type="text/javascript"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Earthquake Data!</button>
</div>
</div>
</div>
</body>
</html>

步骤二:

现在您已经创建了用户界面,现在是时候编写连接器的 JavaScript 代码了。

创建一个名为 tapdataWDC.js 的新文件,并将其保存在与 tapdata.html 文件相同的目录中。

tapdataWDC.js
(function () {
var myConnector = tableau.makeConnector();
myConnector.getSchema = function (schemaCallback) {
var cols = [{
id: "id",
dataType: tableau.dataTypeEnum.string
}, {
id: "name",
alias: "username",
dataType: tableau.dataTypeEnum.float
}];
var tableSchema = {
id: "tapdata",
alias: "This is a tableau reading data from tapdata test.",
columns: cols
};
schemaCallback([tableSchema]);
};
myConnector.getData = function(table, doneCallback) {
$.getJSON("http://<TAPDATA API SERVER HOST>:<TAPDATA API SERVER PORT>/api/v1/user?token=xxx", function(resp) {
var feat = resp.data,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
"id": feat[i]._id,
"name": feat[i].name,
});
}
table.appendRows(tableData);
doneCallback();
});
};
tableau.registerConnector(myConnector);
$(document).ready(function () {
$("#submitButton").click(function () {
tableau.connectionName = "USGS Tapdata Feed";
tableau.submit();
});
});
})();

步骤三:

刷新浏览器。

在 WDC URL 字段中,输入 WDC 相对于模拟器的路径。 例如,如果您在顶级目录中创建了WDC,则可以输入:../tapdataWDC.html

步骤四:

单击“Start Interactive Phase”按钮。 连接器页面将显示在新窗口中。

单击“Get tapdata Data” 按钮,连接器页面关闭。

在 Tableau Desktop 中使用 WDC

步骤一:

在开始页面的 “连接” 窗格中,单击 “更多服务器...” -> “Web数据连接器”。

步骤二:

输入WDC的URL,然后按Enter键。

注意:确保输入的是 WDC 的 URL,而不是您要连接的数据的 URL。

例如,如果要连接到 Tapdata 数据,则可以输入 http://localhost:8888/tapdataWDC.html

步骤三:

Tableau 加载 WDC 页面,您可以在其中输入 WDC 所需的任何输入。

Tableau 调用您的 WDC 代码,下载数据,并在 “数据源” 窗格中显示它。