Tableau 嵌入 API v3

引入嵌入 API v3

Tableau 嵌入 API v3 为您提供了一种在 Web 应用程序和网页中嵌入和集成 Tableau 视图的简单方法。Tableau 嵌入 API v3 提供了比 Tableau JavaScript API v2 更高级别的增强功能。Tableau 嵌入 API v3 具有重新设计的嵌入流程，让您的生活更轻松、体验现代化并启用新功能。

使用 Embedding API v3 的某些部分与 JavaScript API v2 相同，而其他部分的语法略有不同。但最大的不同是 API 的初始化，您现在可以在其中使用 Web 组件。

Web 组件是所有现代浏览器中可用的标准，它允许您使用 HTML 语法向网页添加自定义和第 3 方功能，就像添加image、link或div. 使用 Web 组件技术，我们创建了一个组件，您可以使用该组件将可视化添加到您的网页。

· 有关Embedding API v3和 Embedding API v3 和从 Embedding JSAPI v1 或 v2 迁移到 Embedding API v3。

· 有关实际使用的嵌入 API v3 的概述和演示，请参阅 TC 21 演讲，Tableau嵌入的新时代。

· Embedding API v3 正在积极开发中，加入Tableau开发人员计划并及时了解即将推出的功能。

简单嵌入入门

在网页上嵌入 Tableau 可视化效果非常简单，只需几个步骤。

1. 链接到 Embedding API 库

从 Tableau 2021.4 开始，Embedding API v3 库托管在 Tableau Server、Tableau Online、Tableau Public 和 Tableau CDN ( https://embedding.tableauusercontent.com/) 上。库 ( tableau.embedding.3.n.n.min.js) 是一个 JavaScript ES6 模块。要在您的 Web 应用程序中使用该库，您需要在标签中将type属性设置为。module

有关嵌入 API v3 库文件的更多信息，请参阅访问嵌入 API。

2. 添加 Tableau viz Web 组件

对于 Embedding API v3，初始化步骤现在比 Tableau JavaScript API v2 更容易。当您使用Web 组件时，您可以将 API 初始化为 HTML 代码的一部分。例如，以下代码就是将 Tableau 视图嵌入 HTML 页面所需的全部内容。

id="tableauViz"

src='http://my-server/views/my-workbook/my-view'>

如果您需要对嵌入视图进行编程控制，还可以使用嵌入 API 和 JavaScript 代码来创建和配置 Tableau Viz 对象。有关更多信息，请参阅使用 JavaScript 初始化 API 并嵌入视图。

3. 自定义 Tableau viz Web 组件

要指定有关如何初始化 viz 的选项，您可以将它们添加为元素的属性。例如，您可以使用属性来显示或隐藏工具栏或选项卡，设置可视化项的高度和宽度，以及设置设备布局。有关您可以使用的属性的详细信息，请参阅配置 TableauViz 对象和组件。

id="tableauViz"

src="http://my-server/views/my-workbook/my-view"

device="phone" toolbar="bottom" hide-tabs>

基本嵌入示例

这是代码：

type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"> id="tableauViz"         src='https://public.tableau.com/views/Superstore_24/Overview'        device="phone" toolbar="bottom" hide-tabs>

这是将代码放入网页时的样子：