tableau如何对接web

Tableau如何对接Web：通过内嵌Tableau视图在网页中、使用Tableau JavaScript API、利用Tableau REST API、采用Web Data Connector。使用Tableau JavaScript API可以实现与网页的深度集成，允许开发者控制Tableau视图的行为并与其他Web元素交互。

使用Tableau JavaScript API可以实现多种功能，如嵌入视图、设置过滤器、监听事件、导出图表等。这种方式不仅能提升用户体验，还能最大化Tableau的功能和网页的交互性。例如，通过API可以动态地设置数据过滤器，使用户在Web页面上选择某些条件时，自动刷新Tableau视图，显示相关的数据。这种灵活性和强大的功能使得Tableau与Web的集成成为数据可视化和交互的最佳选择。

一、内嵌Tableau视图在网页中

将Tableau视图直接嵌入网页是最简单的对接方式。通过使用Tableau提供的嵌入代码，可以将仪表板或视图嵌入到HTML页面中。这种方式适用于需要快速展示数据且无需复杂交互的场景。

1. 使用嵌入代码

Tableau提供了方便的嵌入代码，可以直接在Tableau Server或Tableau Public上获取。只需将这些代码复制并粘贴到HTML文件中即可。

<iframe src="https://public.tableau.com/views/YourVizName/Sheet1?:embed=y&:display_count=yes&:showVizHome=no" width="800" height="600"></iframe>

2. 设置参数

在嵌入代码中，可以通过URL参数设置一些选项，如初始过滤器、隐藏工具栏等。这些参数可以帮助用户根据需求自定义嵌入的视图。

<iframe src="https://public.tableau.com/views/YourVizName/Sheet1?:embed=y&:display_count=yes&:showVizHome=no&Region=East" width="800" height="600"></iframe>

二、使用Tableau JavaScript API

Tableau JavaScript API提供了强大的功能，可以实现与网页的深度集成。通过API，开发者可以控制Tableau视图的行为，与其他Web元素进行交互。

1. 嵌入视图

首先，需要在HTML文件中引入Tableau的JavaScript API库。然后，使用JavaScript代码将Tableau视图嵌入到指定的HTML元素中。

<div id="vizContainer"></div>
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
    var viz;
    window.onload = function() {
        var containerDiv = document.getElementById("vizContainer"),
            url = "https://public.tableau.com/views/YourVizName/Sheet1";
        var options = {
            hideTabs: true,
            onFirstInteractive: function () {
                console.log("Tableau visualization is ready.");
            }
        };
        viz = new tableau.Viz(containerDiv, url, options);
    };
</script>

2. 设置过滤器

通过Tableau JavaScript API，可以动态设置数据过滤器。例如，当用户在网页上选择某些条件时，可以自动刷新Tableau视图，显示相关的数据。

<button onclick="applyFilter()">Apply Filter</button>
<script type="text/javascript">
    function applyFilter() {
        viz.getWorkbook().getActiveSheet().applyFilterAsync(
            "Region",
            "East",
            tableau.FilterUpdateType.REPLACE
        );
    }
</script>

3. 监听事件

Tableau JavaScript API还允许开发者监听特定事件，如筛选器更改、标记选择等。这些事件可以触发自定义的JavaScript函数，实现更加复杂的交互效果。

viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, function(event) {
    return event.getMarksAsync().then(function(marks) {
        console.log("Marks selected: ", marks);
    });
});

三、利用Tableau REST API

Tableau REST API提供了一组HTTP接口，可以用来管理Tableau Server或Tableau Online上的资源。通过REST API，开发者可以实现自动化任务，如发布工作簿、刷新提取数据等。

1. 认证和获取令牌

使用REST API前，需要进行认证并获取访问令牌。可以通过发送HTTP POST请求到Tableau Server的认证端点来实现。

import requests
auth_url = "https://your-server/api/3.10/auth/signin"
auth_payload = {
    "credentials": {
        "name": "your-username",
        "password": "your-password",
        "site": {
            "contentUrl": ""
        }
    }
}
response = requests.post(auth_url, json=auth_payload)
token = response.json()["credentials"]["token"]

2. 发布工作簿

使用获取到的令牌，可以通过发送HTTP POST请求将工作簿发布到Tableau Server。

publish_url = "https://your-server/api/3.10/sites/{site_id}/workbooks"
headers = {
    "X-Tableau-Auth": token
}
files = {
    "request_payload": ('', '<tsRequest><workbook name="WorkbookName" showTabs="true"><project id="project-id"/></workbook>'),
    "tableau_workbook": ('workbook.twbx', open('path/to/your/workbook.twbx', 'rb'), 'application/octet-stream')
}
response = requests.post(publish_url, headers=headers, files=files)

3. 刷新提取数据

通过REST API，可以发送HTTP POST请求来刷新工作簿中的提取数据，以确保数据的最新性。

refresh_url = "https://your-server/api/3.10/sites/{site_id}/workbooks/{workbook_id}/refresh"
response = requests.post(refresh_url, headers={"X-Tableau-Auth": token})

四、采用Web Data Connector

Tableau的Web Data Connector（WDC）允许用户从Web数据源中获取数据并将其导入Tableau。WDC是一种基于HTML和JavaScript的框架，可以用来连接到任何支持HTTP协议的数据源。

1. 创建Web Data Connector

要创建WDC，需要编写一个HTML文件，其中包含JavaScript代码来定义连接逻辑。可以使用Tableau提供的WDC SDK来简化开发过程。

<!DOCTYPE html>
<html>
<head>
    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js"></script>
    <script>
        (function() {
            var myConnector = tableau.makeConnector();
            myConnector.getSchema = function(schemaCallback) {
                var cols = [
                    { id: "id", alias: "ID", dataType: tableau.dataTypeEnum.string },
                    { id: "name", alias: "Name", dataType: tableau.dataTypeEnum.string }
                ];
                var tableSchema = {
                    id: "myTable",
                    alias: "My Table",
                    columns: cols
                };
                schemaCallback([tableSchema]);
            };
            myConnector.getData = function(table, doneCallback) {
                fetch('https://api.example.com/data')
                    .then(response => response.json())
                    .then(data => {
                        table.appendRows(data);
                        doneCallback();
                    });
            };
            tableau.registerConnector(myConnector);
        })();
    </script>
</head>
<body>
    <button onclick="tableau.connectionName = 'My Web Data Connector'; tableau.submit();">Get Data</button>
</body>
</html>

2. 使用Web Data Connector

在Tableau Desktop中，可以通过“连接”->“到服务器”->“Web Data Connector”来使用创建的WDC。输入WDC的URL，然后按照提示完成数据导入。

<input type="text" id="wdc-url" placeholder="Enter WDC URL" />
<button onclick="connectToWDC()">Connect</button>
<script>
    function connectToWDC() {
        var wdcUrl = document.getElementById("wdc-url").value;
        tableau.connectionName = "My Web Data Connector";
        tableau.connectionData = JSON.stringify({ url: wdcUrl });
        tableau.submit();
    }
</script>

五、最佳实践和建议

1. 安全性

在将Tableau与Web对接时，安全性是一个重要的考虑因素。确保在Web服务器和Tableau Server之间使用HTTPS协议进行通信，以保护数据的传输安全。同时，限制对嵌入代码或API令牌的访问，以防止未经授权的使用。

2. 性能优化

为了提高Tableau与Web对接的性能，可以采取以下措施：

使用提取数据而不是实时连接，以减少对数据源的压力。
优化Tableau工作簿中的计算和过滤器，减少加载时间。
在Web页面上使用异步加载技术，确保页面在加载Tableau视图时不会卡顿。

3. 用户体验

良好的用户体验是成功的关键。在将Tableau视图嵌入网页时，确保视图的大小和布局适应不同设备的屏幕尺寸。使用自定义CSS和JavaScript来美化嵌入的视图，提高用户的交互体验。

六、案例分析

通过几个实际案例，可以更好地理解如何将Tableau与Web进行对接。

1. 电商数据可视化平台

某电商公司希望在其后台管理系统中嵌入Tableau仪表板，以便管理人员实时监控销售数据和库存情况。通过使用Tableau JavaScript API，公司实现了以下功能：

嵌入多个Tableau仪表板，展示不同维度的数据。
动态设置过滤器，使管理人员可以按地区、时间段等条件筛选数据。
监听用户的操作，并在后台系统中记录日志，以便后续分析。

2. 金融数据分析工具

某金融公司开发了一款在线数据分析工具，允许用户上传数据并生成可视化报告。通过使用Tableau REST API和Web Data Connector，公司实现了以下功能：

自动化发布用户上传的工作簿，并在后台系统中管理这些工作簿。
使用Web Data Connector连接到多个外部数据源，如股票市场数据、经济指标等。
提供自定义的分析模板，用户可以选择不同的模板生成报告。

七、总结

Tableau与Web的对接提供了丰富的功能和灵活性，可以满足不同场景下的数据可视化需求。通过内嵌Tableau视图、使用Tableau JavaScript API、利用Tableau REST API和采用Web Data Connector，开发者可以实现与网页的深度集成，提供更加动态和交互的数据展示。无论是简单的嵌入视图，还是复杂的自动化任务和数据连接，Tableau都能为用户提供强大的支持和便利。