如何将嵌入HTML中的Tableau Viz置于中心位置当嵌入到HTML文档中时，Tableau可视化（viz）默认占用

当嵌入到HTML文档中时，Tableau可视化（viz）默认占用100%的窗口宽度。

如果你想让Tableau Viz在你的HTML文档中居中，你需要添加一个具有所需宽度和边距样式的父元素，这将导致Tableau HTML元素居中。

例如，我在Tableau Public中发布了一个饼图图谱，其链接如下：

TableauPieChartExample

要在HTML页面中嵌入饼图，请点击分享按钮并复制框中提供的嵌入代码：

Tableau embed code

Tableau嵌入代码 (tableau-embed-code.png)

然后，你需要将嵌入代码粘贴到你的HTML文档中，以便在浏览器上显示Tableau Viz。

为了简洁起见，下面的例子中省略了Tableau的一些HTML标签：

<body>
<div
class="tableauPlaceholder"
id="viz1646888708983"
style="position: relative"
>
<!-- code omitted for brevity... -->
</div>
</body>

但当浏览器窗口的宽度过大时，Viz的显示可能会在图表和图例之间出现巨大的空白。

Tableau in HTML has a huge gap when not centered

HTML中的Tableau在不居中时有一个巨大的间隙 (tableau-not-centered.png)

你可以通过用另一个<div> 标签将带有class="tableauPlaceholder" 属性的主<div> 居中来减少这个间隙。

在下面的例子中，创建了<div class="tableau-center"> 标签来包裹tableauPlaceholder div元素：

<body>
 <style>
 .tableau-center {
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 }
 </style>
 <div class="tableau-center">
 <div
class="tableauPlaceholder"
id="viz1646888708983"
style="position: relative"
></div>
 </div>
</body>

然后给tableau-center 元素添加了一个CSS样式，添加了width 、margin-left 和margin-right 属性。

呈现在页面上的可视化效果将如下所示：

Tableau centered in an HTML page

在HTML页面中居中的Tableau (tableau-html-center.png)

通过包裹的<div> 标签，你可以将嵌入的Viz居中，同时也可以设置Viz的宽度。这样一来，图表和图例之间的巨大差距就会缩小。

我希望这个教程对你有用👍