Intégrer des tableaux de bord

S’applique à : Tableau Cloud, Tableau Server

Le code d’intégration pour Tableau Server 2022.3 et versions ultérieures et Tableau Cloud a changé de manière à utiliser Embedding API v3. Pour obtenir des informations à jour sur les dispositions spécifiques aux appareils et le dimensionnement d’un tableau de bord, consultez Configurer les objets et composants d’intégration dans l' aide d’Embedding API. Les informations de cette rubrique concernent les versions antérieures d’Embedding (utilisant l’API Tableau JavaScript v1 et v2).

Intégrer des tableaux de bord à l’aide de versions antérieures d’Embedding

Vous pouvez intégrer un tableau de bord Tableau dans votre propre site Web ou page wiki, et vous pouvez l’afficher dans différentes dispositions en fonction de la taille de l’iframe.

  • Pour que la disposition correcte apparaisse automatiquement pour les utilisateurs quel que soit l’appareil utilisé, créez des dispositions spécifiques à un appareil pour votre tableau de bord dans Tableau Desktop. Dans ce cas, Tableau Server et Tableau Cloud affichent automatiquement la disposition correcte en fonction de la taille de l’iframe, à condition que vous utilisiez 100 % comme largeur et hauteur de l’iframe au lieu des valeurs de pixel exactes (voir ci-dessous).
  • Pour qu’une disposition spécifique apparaisse toujours, quelle que soit la taille de l’iframe, utilisez le paramètre device dans votre code d’intégration.

Dans l’exemple suivant, le code d’intégration affiche un tableau de bord de 800 pixels de large par 600 pixels de hauteur. Les valeurs de largeur et de hauteur exactes font partie du code d’intégration par défaut que vous obtenez lorsque vous cliquez sur le bouton Partager en haut de votre vue ou de votre tableau de bord :

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

Dans cet exemple où le tableau de bord utilise des dispositions spécifiques aux appareils, les attributs de style pour la classe div ont été supprimés, et les valeurs de classe d’objet pour la largeur et la hauteur ont été remplacées par 100%. Dans la plupart des cas, la disposition correcte s’affiche, c’est-à-dire que la largeur et la hauteur ne sont pas également contrôlées ailleurs dans votre 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 la disposition correcte ne s’affiche pas, ceci peut être parce que la page HTML que vous utilisez pour l’intégration a une balise <!DOCTYPE html> et que cette balise empêche les éléments dans le corps de la page d’être redimensionnés à 100 % (consultez les détails sur le débordement de la pile(Le lien s’ouvre dans une nouvelle fenêtre)). Une solution de contournement consiste à ajouter les lignes suivantes au corps de votre page HTML :

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

L’exemple suivant part de l’hypothèse que le tableau de bord intégré utilise des dispositions spécifiques à un appareil. Le paramètre device est réglé sur phone. Cela signifie que, quel que soit l’appareil affichant le tableau de bord, la disposition affichée sera celle créée pour les téléphones.

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

Dimensions d’iframe et dispositions pour les appareils

La disposition de tableau de bord affichée par un appareil est basée sur la dimension la plus petite (hauteur ou largeur) de l’iframe où la vue Tableau s’affiche. Il peut arriver que les dispositions pour ordinateurs de bureau, tablettes ou téléphones s’affichent sur d’autres types d’appareils. Par exemple, une disposition pour tablette peut s’afficher sur un ordinateur de bureau si l’écran ou la fenêtre du navigateur est de petite taille.

Si la dimension la plus petite de l’iframe est ...la disposition pour cet appareil apparaît ...
500 pixels ou moinsTéléphone
Entre 501 et 800 pixelsTablette
Supérieure à 800 pixelsOrdinateur de bureau

Pour plus d’informations sur la création d’un tableau de bord utilisant des dispositions spécifiques à un appareil, consultez Créer des dispositions de tableau de bord pour différents types d’appareils.

Retour en haut
Merci de vos commentaires !Avis correctement envoyé. Merci