Inserir painéis

Aplica-se a: Tableau Cloud, Tableau Server

O código de incorporação do Tableau Server 2022.3 e posterior e Tableau Cloud mudou para usar a Embedding API v3. Para obter informações atuais sobre layouts específicos de dispositivos e dimensionamento de painéis, consulte Configurar objetos e componentes na ajuda da Embedding API. As informações neste tópico são para versões anteriores de incorporação (usando a API JavaScript do Tableau v1 e v2).

Incorporar painéis usando versões anteriores de incorporação

Você pode inserir um painel do Tableau em seu próprio site ou página wiki e exibi-lo em diferentes layouts com base no tamanho do iframe.

  • Para fazer com que o layout certo apareça para os usuários, independentemente de que dispositivo estejam usando, crie layouts específicos de dispositivo para o painel no Tableau Desktop. Quando você faz isso, o Tableau Server e o Tableau Cloud exibem automaticamente o layout correto com base no tamanho do iframe, contanto que você use 100% da largura e da altura do iframe, em vez dos valores de pixel exatos (veja abaixo).
  • Para sempre exibir determinado layout, independentemente do tamanho do iframe, use o parâmetro device no código inserido.

No exemplo a seguir, o código inserido exibe um painel com 800 pixels de largura por 600 pixels de altura. Os valores exatos de largura e altura são parte do código inserido padrão obtido ao clicar no botão Compartilhar na parte superior de uma exibição ou um painel:

<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>

Neste exemplo, em que o painel usa layouts específicos de dispositivo, os atributos de estilo da classe div foram removidos e os valores da classe de objeto para largura e altura foram substituídos por 100%. Na maioria dos casos, o layout é exibido; ou seja, se a largura e altura não estiverem sendo controladas em outro local do 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>

Se o layout correto não for exibido, pode ser porque a página HTML usada para a inserir a exibição tem uma tag <!DOCTYPE html> e esta tag está impedindo itens no corpo da página de serem redimensionados para 100% (consulte detalhe sobre Excedente de pilha(O link abre em nova janela)). Uma solução alternativa é adicionar as seguintes linhas ao corpo da sua página HTML:

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

O exemplo a seguir presume que o painel incorporado tenha layouts específicos de dispositivo. O parâmetro device está definido como phone. Isso significa que, não importa qual dispositivo seja exibido no painel, o layout criado para telefones será mostrado.

<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>

Dimensões do iframe e layouts do dispositivo

O layout do painel exibido por um dispositivo é baseado na menor dimensão (altura ou largura) do iframe na qual a exibição do Tableau é mostrada. Às vezes, os layouts de computador, tablet ou celular podem ser exibidos em outros tipos de dispositivos. Por exemplo, um layout de tablet pode ser exibido em um computador desktop se a tela ou a janela do navegador for pequena demais.

Se a menor dimensão do iframe for ...Este layout de dispositivo será exibido ...
500 pixels ou inferiorSmartphone
Entre 501 e 800 pixelsTablet
Maior que 800 pixelsDesktop

Para obter detalhes sobre como criar um painel que usa layouts específicos de dispositivo, consulte Criar layouts de painel para tipos de dispositivo diferentes.

Voltar para o topo
Agradecemos seu feedback!Seu feedback foi enviado. Obrigado!