嵌入仪表板

您可以在自己的网站或 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 像素 台式机

有关如何创建使用设备特定布局的仪表板的详细信息,请参见针对不同设备类型创建仪表板布局

感谢您的反馈! 提交反馈时出错。请重试,或向我们发送消息