BI 平台的一个关键功能，是将交互式 Tableau 视图嵌入到网页、博客、wiki 页面、Web 应用程序和 Intranet 门户中。嵌入式视图会随着基础数据的变化或工作簿在 Tableau Server 或 Tableau Cloud 上的更新而更新。

欢迎体验喜乐君推出的“企业级共享平台”，提供标准的BI Portal 及定制开发：
体验地址：https://vizwise.online； 用户名：喜乐君（密码为用户名拼音）
请勿修改测试环境的内容，谢谢

借助于嵌入式开发，可以极大地降低企业开发成本，提高数据分享的范围。Tableau 提供了完整的嵌入功能，既可以使用“分享”直接创建嵌入代码，也可以使用 API 或 JS 创建。

如下则是tableau 官方提供的嵌入式动画案例：

本文介绍一下嵌入的多个方案。

一、使用“嵌入代码”快速嵌入Tableau Public 页面

私有化部署的 Tableau Server 视图嵌入需要用户认证，为了便于理解，这里先从 Tableau Public 开始。

作为 Tableau 的社区服务器版本，Tableau Public 为全球无数用户提供了快捷的 Dashboard 访问体验，嵌入无需授权，只需要两步即可完成。

1、借助“分享”生成嵌入式代码

Tableau Public和 Tableau Server 都可以快速生成嵌入代码，如下所示：

在任何一个 Tableau 页面，点击右上角的“分享”即可弹出分享链接，其中有两个基本选项：

  • 嵌入代码：div 代码块，嵌入的首选项。
  • 链接：适用于网络直接分享的 http地址，通常不建议用于嵌入使用。

在上面的页面中，喜乐君把拷贝出来的嵌入代码做了一些格式上的调整，如下所示：

<div class='tableauPlaceholder' id='viz1708776537643' style='position: relative'>
<noscript>
<a href='#'>
<img alt='Executive Overview Dashboard
src='https://public.tableau.com/static/images/BO/BOOK1_16999164721030/ExecutiveOverviewDashboard/1_rss.png' style='border: none' /></a>
</noscript>

<object class='tableauViz'  style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> 
<param name='embed_code_version' value='3' /> 
<param name='site_root' value='' />
<param name='name' value='BOOK1_16999164721030/ExecutiveOverviewDashboard' />
<param name='tabs' value='no' /><param name='toolbar' value='yes' />
<param name='static_image' value='https://public.tableau.com/static/images/BO/BOOK1_16999164721030/ExecutiveOverviewDashboard/1.png' /> 
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='yes' />
<param name='display_count' value='yes' />
<param name='language' value='zh-CN' />
</object>
</div>               
 
<script type='text/javascript'> 
                   var divElement = document.getElementById('viz1708776537643');
                    var vizElement = divElement.getElementsByTagName('object')[0];
                   vizElement.style.width='1300px';vizElement.style.height='927px';
                    var scriptElement = document.createElement('script');
                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement); 
</script>

可以看出，嵌入代码由一对 div 块和一对 script 构成（html 的代码通常是成对出现，比如<div>和</div>）。其中 div 代码块又包含<noscript>和object两个部分。

当然，这些内容对于IT 人员而言，就像小学题目对于大学生，属于初级内容。高级用户可以修改其中的值从而精确控制布局。

2、将 Div 代码块嵌入到 html 代码之中

关键的一步，是把上面的代码放在一个 html 的代码中。

目前网络世界的页面，基本都遵循HTML 语言规范，因此代码从 <html 开始，到 </html>结束。上述的 div 块必须放在一个完整的页面中才能呈现，比如喜乐君在这篇博文中，就把上述 div 代码块放在一个“自定义HTML”的对象之中，于是就有了下面的效果。

需要说明的是，Tableau Public 嵌入不需要用户账户、不需要登录即可访问，另一个具有类似特征的是“按照服务器核心付费的许可证”。Core 策略下的“来宾用户”可以和 Tableau Public 相当，不过仅仅为少数大企业购买（价格高昂）。

二、使用 API代码高度定制化嵌入体验

若要修改从“共享”对话框中复制的基本嵌入代码，或者创建自定义嵌入式应用程序，还可以使用 Tableau 嵌入 API。

用户可以使用 API 为嵌入式内容启用单点登录 (SSO)，并使用 Tableau 已连接应用自定义和控制用户对数据的访问、控制工具栏选项、应用筛选器、触发事件操作、启用嵌入式 Web 制作等。

从 2022.3 +版本开始，Tableau开始使用API3.0，可以从tableau API 中找到详细的配置说明。

特别强调的是，Tableau 各项 API 都是免费的，不需要支付费用！

1、基于Embedding API定制嵌入选项

不同的 API 版本，在嵌入式会有明显的差异。以 Tableau Server2022.3 版本及 API3 为例，点击“分享”可以获得如下的嵌入代码：

<script type='module' src='http://172.16.20.175:9080/javascripts/api/tableau.embedding.3.latest.min.js'>
</script>
<tableau-viz 
    id='tableau-viz'
    src='http://172.16.20.175/views/MonitorV0_2/sheet0'
    width='1100' height='850'
    toolbar='bottom' >
</tableau-viz>

在这里，http://172.16.20.175:9080 是企业内部的Tableau Server 服务器地址，对应 V3版本的 JS 文件。

很明显，这比之前Public 生成的代码简单的多，其中的关键是 js 文件和自定义代码块’tableau-viz’中的属性定义。高级用户可以在其中增加各种自定义配置。V3 版本相比之前有很大的不同，具体可以参考官方文档Embedding API 。其中列举了所有可用的参数及其值。

比如在上面代码中的 toolbar，默认的 bottom 代表工具栏在底部，除此之外，还可以配置 = “hidden” 或者 “top”两个选项，分别代表隐藏工具栏、工具栏位于顶部。（参考https://help.tableau.com/current/api/embedding_api/en-us/reference/enums/toolbar.html）

如果使用的 API 为 1.0 或者 2.0 版本，那么可以参考 下文，不过更推荐尽快升级服务器到官方最新的维护版本：

2、可参考的模板（ Github）

大家可以在 Github 中找到官方提供的诸多案例。其中介绍了基本配置、筛选、下载数据等多种嵌入方式。

3、JS 嵌入方式

Tableau API 是开放的，除了嵌入到 html 之中，还支持和其他方式嵌入结合，比如 JS。

JavaScript code for embedding a TableauViz object
import {
  TableauViz,
  TableauEventType,
} from 'https://my-server/javascripts/api/tableau.embedding.3.latest.min.js';

官方提供的嵌入案例

import {
  TableauViz,
  TableauEventType,
} from 'https://my-server/javascripts/api/tableau.embedding.3.latest.min.js';

const viz = new TableauViz();

viz.src = 'https://my-server/views/my-workbook/my-view';
viz.toolbar = 'hidden';
viz.addEventListener(TableauEventType.MarkSelectionChanged, handleMarkSelection);

document.getElementById('tableauViz').appendChild(viz);

/*  Methods */

function handleMarkSelection() {
  alert('Mark(s) selected!');
  // code to handle the mark selection goes here
}

三、使用Playground享受嵌入的极致体验

在 2023 版本中，Tableau 推出了便利嵌入的新工具Tableau Embedding Playground ，官方说明如下：

he Tableau Embedding Playground provides developers an interactive learning environment for rapidly developing embedded analytics solutions. Embed Tableau visualizations and quickly add interactions that set filters and parameters, get selected marks, and data, using building blocks of Embedding API methods and properties. Going forward, use your own visualizations on Tableau Cloud, Tableau Server, or Tableau Public to develop your custom applications with code you can export and run anywhere.

https://developer.salesforce.com/tableau/embedding-playground/overview

强烈推荐大家参考官方帮助文档和官方工具：

  • Guide 文档(English)
  • 官方支持工具：https://developer.salesforce.com/tools/tableau/embedding-playground

在这个工具中，用户可以在做好配置之后，自动生成嵌入代码，相当于把前面的定制化过程交互实现了！！如此完美，Tableau 定义。

快来体验吧！

@喜乐君

类似文章