內嵌儀表板

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

  • 若要為您的使用者自動顯示正確的配置,而不考慮他們所使用的裝置,請在 Tableau Desktop 中為您的儀表板建立特定於裝置的配置。當您這樣做時,Tableau Server 和 Tableau Online 會根據 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 圖元 桌上型電腦

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

感謝您的意見回饋!