Incrustar dashboards

Se aplica a: Tableau Cloud, Tableau Server

El código para insertar de Tableau Server 2022.3 y versiones posteriores y Tableau Cloud ha cambiado para usar la API de inserción 3. Para obtener información actualizada sobre los diseños específicos del dispositivo y el tamaño del dashboard, consulte Configurar objetos y componentes insertados en la ayuda de la API de inserción. La información de este tema es para versiones anteriores de inserción (usando la API de JavaScript de Tableau 1 y 2).

Inserte dashboards usando versiones anteriores de inserción

Puede incrustar un dashboard de Tableau en su sitio web o página wiki y hacer que se muestre en disposiciones diferentes en función del tamaño del iFrame.

  • Para que los usuarios vean automáticamente la disposición correcta, independientemente del dispositivo que utilicen, cree disposiciones específicas de dispositivo para el dashboard en Tableau Desktop. Al hacerlo, Tableau Server y Tableau Cloud muestran automáticamente la disposición correcta en función del tamaño del iFrame, siempre y cuando especifique el 100 % para la altura y el ancho del iFrame en vez de los valores exactos en píxeles (véase a continuación).
  • Para que siempre aparezca una disposición determinada, independientemente del tamaño del iFrame, utilice el parámetro device en el código para insertar.

En el siguiente ejemplo, el código de incrustación muestra un dashboard de 800 píxeles de ancho por 600 píxeles de altura. Los valores exactos del ancho y la altura forman parte del código de incrustación predeterminado que se obtiene al hacer clic en el botón Compartir situado en la parte superior de una vista o dashboard:

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

En este ejemplo, en el que el dashboard utiliza disposiciones específicas de dispositivo, se han eliminado los atributos de estilo de la clase div y los valores de las clases de objeto del ancho y la altura se han sustituido por 100%. En la mayoría de los casos se muestra la disposición correcta; es decir, si el ancho y la altura tampoco se controlan desde el 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>

Si no se muestra la disposición correcta, puede deberse a que la página HTML que está usando para incrustar tiene una categoría <!DOCTYPE html> que impide que los elementos del cuerpo de la página cambien su tamaño al 100 % (consulte los detalles acerca de Stack Overflow(El enlace se abre en una ventana nueva)). Una solución a este problema es agregar las líneas siguientes al cuerpo de la página HTML:

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

En el siguiente ejemplo presupone que el dashboard incrustado tiene disposiciones específicas por dispositivo. El parámetro device está definido en phone. Esto significa que, sea cual sea el dispositivo que muestre el dashboard, se mostrará la disposición creada para los teléfonos.

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

Dimensiones del iFrame y disposiciones de dispositivo

La disposición del dashboard que muestra un dispositivo se basa en la dimensión más pequeña (altura o ancho) del Iframe en que aparece la vista de Tableau. Es posible que a veces aparezcan disposiciones de escritorio, tableta o teléfono en otros tipos de dispositivos. Por ejemplo, es posible que aparezca una disposición de tableta en un equipo de escritorio si la ventana del navegador o visualización es pequeña.

Si la menor dimensión del iFrame es...Esta disposición de dispositivo tiene el aspecto...
500 píxeles o menosTeléfono
Entre 501 y 800 píxelesTablet
Más de 800 píxelesEquipo de escritorio

Para obtener información detallada sobre cómo crear un dashboard que utilice disposiciones específicas de dispositivo, consulte Crear disposiciones de dashboard para distintos tipos de dispositivo.

Volver arriba
¡Gracias por sus comentarios!Sus comentarios se han enviado correctamente. ¡Gracias!