1

我正在与一个组织合作构建一个网站，该网站将显示来自 Tableau Public 的表格嵌入，但我遇到了表格显示方式的问题。我已经尝试关注 Tableau 网站上提供的一些资源，例如确保仪表板设置为自动调整大小等......

该网站是一个 wordpress 网站，它的编写方式是，每当检测到来自 Tableau Public 的画面嵌入代码时，它都会自动将其放入 iFrame 中。在 Tableau Public 中，我使用了两个可用嵌入代码中较长的一个。

我已确保画面的仪表板设置为“自动”大小，因此它应该自动调整到屏幕。这似乎不起作用，并且画面嵌入太大。

我在关于 tableau 的资源指南中发现的一件事是，如果您的网站以 !doctype html 开头，那么在嵌入中使用以下代码：

<style> html, body{height:100%} </style>

我应该把它放在嵌入代码中，还是因为它被放在 iFrame 中所以没关系？如果我应该使用它，它应该放在代码的哪里？

放置tableau的网站上的iFrame代码是：



.tableauPlaceholder{

height:auto !important;

padding-bottom:60%;

overflow:hidden;

}



.tableauPlaceholder iframe{

height: 100% !important;

width: 100%;

position:absolute;

}

这个想法是，每当我或其他用户嵌入 Tableau 代码时，上面的代码都会自动检测嵌入并将其放置在此 iFrame 中。

是否应该更改上述代码的内容？

我希望画面能够正确地适合正在显示的屏幕。用户不必缩小或滚动来查看/与图表交互。

感谢您的帮助，我很乐意澄清以上任何内容/提供更多信息。

谢谢。

4

1 回答 1

0

如果仪表板是在 Tableau 中使用自动创建的，那么使用嵌入或 API 的显示将在您的网页中适当缩放。

否则，在嵌入代码中，您可能会找到如下代码：

if ( divElement.offsetWidth > 800 ) { 
    vizElement.style.width='850px';
    vizElement.style.height='1727px';
  }
else if ( divElement.offsetWidth > 500 ) { 
    vizElement.style.width='850px';
    vizElement.style.height='1727px';} 
else { 
    vizElement.style.width='100%';
    vizElement.style.height='2077px';}

您可以根据嵌入代码本身调整尺寸。

于 2021-12-02T05:24:27.430 回答