內嵌儀表板

套用到： 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='display:none;'>
  <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='display:none;'>
  <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='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />
  <param name='device' value='phone' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

Iframe 尺寸和裝置配置

裝置顯示的儀表板配置以其中顯示 Tableau 檢視的 iframe 的最小尺寸（高度和寬度）為基礎。有時，桌上型電腦、平板電腦或行動電話配置可能會出現在其他類型的裝置上。舉例來說，如果台式電腦的顯示器或瀏覽器容器很小，則平板電腦配置可能出現在台式電腦上。

如果 iframe 最小尺寸為...此裝置配置將出現...
500 圖元或更低電話
介於 501 和 800 圖元之間平板電腦
大於 800 圖元桌上型電腦

有關如何建立使用裝置特定配置的儀表板的詳細資料，請參閱針對不同裝置類型建立儀表板窗格配置。

返回頂端
感謝您的意見反應！已成功提交您的意見回饋。謝謝！