Dashboards insluiten

Is van toepassing op: Tableau Cloud, Tableau Server

De insluitcode voor Tableau Server 2022.3 en hoger en Tableau Cloud is gewijzigd om de Embedding API v3 te gebruiken. Zie Insluitobjecten en -componenten configureren in de hulpsectie van de Embedding API voor actuele informatie over apparaatspecifieke lay-outs en dashboardformaten. De informatie in dit onderwerp is bedoeld voor eerdere versies van insluiting (met behulp van de Tableau JavaScript API v1 en v2).

Dashboards insluiten met behulp van eerdere versies van insluiting

U kunt een Tableau-dashboard in uw eigen website of wikipagina insluiten en het in verschillende lay-outs laten weergeven, afhankelijk van de grootte van het iframe.

  • Om ervoor te zorgen dat uw gebruikers automatisch de juiste lay-out zien, ongeacht welk apparaat ze gebruiken, kunt u apparaatspecifieke lay-outs voor uw dashboard maken in Tableau Desktop. Wanneer u dat doet, geven Tableau Server en Tableau Cloud automatisch de juiste lay-out weer op basis van de iframe-grootte, mits u 100% gebruikt voor de breedte en hoogte van het iframe in plaats van exacte pixelwaarden (zie hieronder).
  • Om altijd een bepaalde lay-out te laten verschijnen, ongeacht de grootte van het iframe, gebruikt u de parameter device in uw insluitcode.

In het volgende voorbeeld toont de insluitcode een dashboard dat 800 pixels breed en 600 pixels hoog is. Exacte waarden voor breedte en hoogte maken deel uit van de standaardinsluitcode die u krijgt wanneer u op de knop Delen klikt bovenin een weergave of 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>

In dit voorbeeld, waarin het dashboard apparaatspecifieke lay-outs gebruikt, zijn de stijlkenmerken voor de div-klasse verwijderd en zijn de objectklassewaarden voor breedte en hoogte vervangen door 100%. In de meeste gevallen wordt de juiste lay-out weergegeven, tenzij de breedte en hoogte ook elders in uw CSS worden beheerd.

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

Als de juiste lay-out niet wordt weergegeven, kan dit komen doordat de HTML-pagina die u voor het insluiten gebruikt een tag <!DOCTYPE html> heeft, en die tag voorkomt dat items in de hoofdtekst van de pagina worden aangepast naar 100% (zie details op Stack Overflow(Link wordt in een nieuw venster geopend)). Een tijdelijke oplossing is om de volgende regels toe te voegen aan de hoofdtekst van uw HTML-pagina:

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

In het volgende voorbeeld wordt ervan uitgegaan dat het ingesloten dashboard apparaatspecifieke lay-outs heeft. De parameter device is ingesteld op phone. Dit betekent dat ongeacht op welk apparaat het dashboard wordt weergegeven, altijd de lay-out voor telefoons wordt weergegeven.

<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-afmetingen en -apparaatlay-outs

De dashboardlay-out die een apparaat weergeeft, is gebaseerd op de kleinste afmeting (hoogte of breedte) van het iframe waarin de Tableau-weergave verschijnt. Soms kunnen desktop-, tablet- of telefoonlay-outs op andere typen apparaten verschijnen. Een tabletlay-out kan bijvoorbeeld op een desktopcomputer verschijnen als het weergave- of browservenster klein is.

De kleinste iframe-dimensie is ...Deze apparaatlay-out verschijnt ...
500 pixels of minderTelefoon
Tussen 501 en 800 pixelsTablet
Groter dan 800 pixelsDesktop

Zie Dashboardlay-outs maken voor verschillende apparaattypen voor meer informatie over het maken van een dashboard dat gebruikmaakt van apparaatspecifieke lay-outs.

Terug naar boven
Bedankt voor uw feedback.De feedback is verzonden. Dank u wel.