Bädda in instrumentpaneler

Gäller för: Tableau Cloud, Tableau Server

Inbäddningskoden för Tableau Server 2022.3 och senare och Tableau Cloud har ändrats till att använda Embedding API v3. Aktuell information om enhetsspecifika layouter och instrumentpanelsstorlek finns i Konfigurera inbäddningsobjekt och -komponenter i Embedding API-hjälpen. Informationen i det här ämnet gäller tidigare versioner av inbäddning (med hjälp av Tableau JavaScript API v1 och v2).

Bädda in instrumentpaneler med tidigare versioner av inbäddning

Du kan bädda in en Tableau-instrumentpanel på din webbplats eller wikisida och du kan låta den visas i olika layouter beroende på iframe-storleken.

  • Om du vill att rätt layout ska visas automatiskt för användarna, oavsett vilken enhet de använder, måste du skapa enhetsspecifika layouter för instrumentpanelen i Tableau Desktop. När du gör det visar Tableau Server och Tableau Cloud automatiskt korrekt layout baserat på iframe-storleken, förutsatt att du använder 100 % för iframe-bredden och -höjden i stället för exakta pixelvärden (se nedan).
  • Om du vill att en viss layout alltid ska visas, oavsett vilken iframe-storleken är, så använd parametern device i inbäddningskoden.

I följande exempel visar inbäddningskoden en instrumentpanel med en bredd på 800 pixlar och en höjd på 600 pixlar. De exakta bredd- och höjdvärdena ingår i standardinbäddningskoden som du får när du klickar på knappen Dela högst upp i en vy eller instrumentpanel:

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

I det här exemplet, där instrumentpanelen använder enhetsspecifika layouter, har typattributen för div-klassen tagits bort och objektklassvärdena för bredd och höjd har ersatts med 100 %. I de flesta fall visas korrekt layout, det vill säga om inte även bredd och höjd kontrolleras någon annanstans i 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>

Om korrekt layout inte visas kan det bero på att den HTML-sida som du använder för inbäddning har en <!DOCTYPE html>-tagg, och att den taggen förhindrar objekt i sidans brödtext från att ändra storlek till 100 % (läs mer i Information om full stackspill(Länken öppnas i ett nytt fönster)). En lösning är att lägga till följande rader i HTML-sidans brödtext:

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

I följande exempel förutsätts att den inbäddade instrumentpanelen har enhetsspecifika layouter. Parametern device är inställd på phone. Detta innebär att oavsett på vilken enhet instrumentpanelen visas, så kommer den layout som skapats för telefoner att vara den som visas.

<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-dimensioner och enhetslayouter

Vilken layout en instrumentpanel visas med på en enhet beror på det minsta måttet (höjd eller bredd) på iframe-ramen där Tableau-vyn visas. Ibland kan en typisk dator-, surfplatte- eller telefonlayout visas på andra typer av enheter. En surfplattelayout kan till exempel användas på en dator med en liten skärm eller om webbläsarfönstret är litet.

Om det minsta måttet på iframe-ramen är …Så används den här enhetslayouten …
Upp till 500 pixlarTelefon
Mellan 501 och 800 pixlarSurfplatta
Större än 800 pixlarSkrivbord

Information om hur du kan skapa en instrumentpanel som använder enhetsanpassade layouter finns i Skapa kontrollpanellayouter för olika enhetstyper.

Tillbaka till toppen
Tack för din feedback!Din feedback har skickats in. Tack!