如何将Tableau可视化嵌入网站

已编辑 1 天前通过 ExtremeHow 编辑团队

Tableau数据可视化软件网页嵌入数据可视化商业智能网络开发集成分析视窗苹果电脑 HTML

翻译更新 1 天前

将Tableau可视化嵌入网站是与更广泛的受众分享互动数据和仪表板的好方法。这是一种将商业智能集成到您的Web应用程序中的有用方法，允许网站访问者直接从网页中探索数据。本指南将引导您完成嵌入Tableau可视化至您的网站的各个步骤和要求。

了解Tableau嵌入选项

在我们深入了解技术流程之前，了解嵌入的意义很重要。当您嵌入Tableau可视化时，您实际上是在将一段交互式数据直接集成到网页中。这可以是您使用Tableau创建的报告、仪表板或任何可视数据表示。

以下是嵌入Tableau可视化的主要方法：

使用Tableau Public。
使用Tableau Server或Tableau Cloud。
使用Tableau JavaScript API。

使用Tableau Public

Tableau Public是一个免费的平台，用户可以在此公开分享Tableau可视化。要使用这种方法，按照以下步骤操作：

在Tableau Desktop中创建可视化。
将其发布到Tableau Public。
从Tableau Public获取嵌入代码。

步骤1：在Tableau Desktop中创建可视化

首先在Tableau Desktop中创建一份完整的可视化。确保您的数据是干净的，并且您的可视化准确反映您想要讲述的故事。一旦您对可视化满意，就可以准备发布了。

步骤2：发布到Tableau Public

在Tableau Desktop中，点击菜单按钮“文件”，然后选择“另存为Tableau Public...”。您需要登录到您的Tableau Public账户。如果您没有账户，需要免费注册。登录后，您的可视化将会上传到Tableau Public。

步骤3：获取嵌入代码

当您的可视化发布到Tableau Public后，在网页浏览器中打开它。会有一个分享按钮（通常标记为“分享”），通常位于窗口的底部。当您点击此按钮时，会看到若干分享可视化的选项。选择“嵌入代码”选项。这会提供一个HTML片段，您可以将其插入到您的网站中。

<iframe src="https://public.tableau.com/views/YourViz here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

复制并粘贴此iframe代码到您希望显示可视化的网页的HTML中。

使用Tableau Server或Tableau Cloud

如果您正在使用Tableau Server或Tableau Cloud，您对可视化的访问控制选项比Tableau Public多。这些平台提供嵌入功能，并带有安全性和用户身份验证，但嵌入的基本步骤仍然相似。

步骤1：将可视化发布到Tableau Server或Tableau Cloud

在Tableau Desktop中创建可视化并发布到您的Tableau Server或Tableau Cloud。从主菜单选择“服务器”选项，然后选择“发布工作簿”并按照指示进行操作。

步骤2：获取嵌入代码

一旦工作簿上传，前往在线版本并查找“分享”按钮。这将显示嵌入选项。根据您组织的设置，您可能需要管理员权限才能获取嵌入代码。

Tableau Server或Tableau Cloud通常以iframe的形式提供嵌入代码，或者您可以使用JavaScript API自定义它。Tableau提供的iframe嵌入代码示例如下：

<iframe src="https:// /views/YourViz here" width="800" height="600" frameborder="0"></iframe>

将此代码放在您希望显示可视化的网页的HTML中。

使用Tableau JavaScript API

对于更复杂的嵌入需求，Tableau JavaScript API提供更多的灵活性和控制。它允许您以编程方式与可视化进行交互。

步骤1：在HTML中包含Tableau JavaScript API

首先，确保您的网页包含Tableau JavaScript API库。将以下行添加到HTML文档的<head>部分：

<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

步骤2：为可视化创建一个容器

在您的HTML文件中设置一个占位符或容器，以容纳Tableau可视化。这通常是一个具有指定宽度和高度的<div>元素。

<div id="tableauViz" style="width: 800px; height: 600px;"></div>

步骤3：初始化并嵌入可视化

使用JavaScript，您可以在页面上初始化并嵌入Tableau可视化。以下是一个示例脚本：

<script type="text/javascript">
  var containerDiv = document.getElementById("tableauViz"),
      url = "https://public.tableau.com/views/YourDashboard here",
      options = {
          width: containerDiv.style.width,
          height: containerDiv.style.height,
          hidetabs: true,
          hideToolbar: true
      };

  viz = new tableau.Viz(containerDiv, url, options);
</script>

以上脚本指向页面上的一个ID为“tableauViz”的<div>。它从给定的URL加载Tableau可视化，并应用自定义选项，诸如隐藏默认选项卡和工具栏。

实现安全性和身份验证

当嵌入Tableau可视化，尤其是用于内部使用时，确保数据安全很重要。Tableau Server和Tableau Cloud提供基于用户的身份验证和权限管理，以确保只有授权用户可以访问可视化。

您可以考虑的一些安全选项包括使用SAML身份验证嵌入、启用可信身份验证以绕过Tableau Server登录，或使用OAuth。

处理响应式设计

如果网站是响应式的，您可能需要确保嵌入的可视化也响应以适应不同设备屏幕。实现这一点的一种方法是通过CSS和JavaScript动态调整iframe或容器div。

响应式CSS示例

<style>
  #tableauViz {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 比例 */
      position: relative;
  }
</style>

以上CSS示例将允许您的可视化在各种设备上保持16:9比例，通过使用“padding-bottom”技巧，这是响应式网页设计中常见的技术。

最后的思考

将Tableau可视化嵌入网站，将丰富的交互式数据洞察直接添加到您的网页中。无论您是使用Tableau Public对公开数据，利用Tableau Server或Cloud用于企业场景，还是使用JavaScript API进行定制解决方案，您都有多种选项可以将强大的Tableau可视化集成到您的网络环境中。

仔细考虑安全性、响应式设计以及用户需求将有助于确保嵌入的Tableau仪表板既有用又安全。尝试不同的方法并找到最适合您独特需求的解决方案。祝您数据可视化愉快！

如果你发现文章内容有误, 您可以

如何将Tableau可视化嵌入网站

了解Tableau嵌入选项

使用Tableau Public

步骤1：在Tableau Desktop中创建可视化

步骤2：发布到Tableau Public

步骤3：获取嵌入代码

使用Tableau Server或Tableau Cloud

步骤1：将可视化发布到Tableau Server或Tableau Cloud

步骤2：获取嵌入代码

使用Tableau JavaScript API

步骤1：在HTML中包含Tableau JavaScript API

步骤2：为可视化创建一个容器

步骤3：初始化并嵌入可视化

实现安全性和身份验证

处理响应式设计

响应式CSS示例

最后的思考

评论

如何将Tableau可视化嵌入网站

搜索 ExtremeHow (zh)