內嵌儀表板

套用到： Tableau Cloud, Tableau Server

Tableau Server 2022.3 及更高版本和 Tableau Cloud 的內嵌程式碼已變更為使用內嵌 API v3。有關裝置特定配置和儀表板大小的目前資訊，請參閱內嵌 API 說明中的設定內嵌物件和元件。本主題中的資訊適用於先前版本的內嵌（使用 Tableau JavaScript API v1 和 v2）。

使用先前版本的內嵌內嵌儀表板

您可以在自己的網站或 wiki 頁面中內嵌 Tableau 儀表板窗格，並且可以根據 iframe 的大小在不同配置中顯示該儀表板窗格。

若要為您的使用者自動顯示正確的配置，而不考慮他們所使用的裝置，請在 Tableau Desktop 中為您的儀表板建立特定於裝置的配置。當您這樣做時，Tableau Server 和 Tableau Cloud 會根據 iframe 大小自動顯示正確的配置，前提是您為 iframe 的寬度和高度使用 100%，而不是確切的圖元值（參閱下文）。
若要始終顯示某個配置而不考慮 iframe 大小，請在內嵌程式碼中使用 device 參數。

在下面的範例中，嵌入代碼顯示 800 圖元寬 x 600 圖元高的儀表板。確切寬度和高度值是您在檢視或儀表板頂端按一下 [共用] 按鈕時獲得的預設嵌入代碼的一部分。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' style='width: 800px; height: 600px;' >
  <object class='tableauViz' width='800' height='600' style=';'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

在儀表板使用裝置特定配置的此範例中，已經移除了 div class 的樣式屬性，並將寬度和高度的 object class 值替換為 100%。大多數情況下會顯示正確的配置；即，在未同時在 CSS 中的其他地方對寬度和高度進行控制的情況下，會顯示正確的配置。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='100%' height='100%' style=';'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

如果正確的配置未顯示，則可能是因為您用於嵌入的 HTML 頁面具有 <!DOCTYPE html> 標記，而該標記會使頁面正文中的項無法在大小調整為 100%（請參閱 Stack Overflow 上的詳細資料 (連結在新視窗開啟) ）。解決方法是向 HTML 頁面的正文中新增以下各行：

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

以下範例假定內嵌儀表板具有特定於裝置的配置。 device 參數已設定為 phone 。這意味著無論哪個裝置顯示儀表板，為電話建立的配置將會是所顯示的配置。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style=';'>
  <param name='host_url' value='http://mysite.myserver.com' />

Tableau Desktop 和 Web 製作說明

內嵌儀表板