Skriva inbäddad kod för vyer
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 hur du bäddar in en vy med Embedding API v3 finns i Grundläggande inbäddning 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).
Om du skriver egen inbäddad kod kan du välja mellan två metoder:
Använd Tableau JavaScript: Det här är den rekommenderade metoden. Använd den inbäddade kod som Tableau genererar som utgångspunkt för din egen kod och lägg till eller redigera objektparametrar som styr verktygsfältet, flikar och mer. Den inbäddade standardkoden, som bygger på en Tableau JavaScript-fil, är också det enda sättet att styra inläsningsordningen för flera inbäddade vyer.
Ange URL:en för vyn: Bädda in en vy genom att använda en iframe eller bildtagg, där källan är URL:en som du får när du klickar på Dela för en vy och sedan klickar på Kopiera länk. Den här metoden är bra om du inte kan använda JavaScript på din webbplats. Det kan också finnas tillfällen då en URL är det enda du kan ange.
När du bäddar in en vy bör du definiera bredden och höjden på området som vyn ska visas i. Annars väljer webbläsaren på klienten en bredd och höjd helt godtyckligt.
Obs! Om du behöver ange servernamnet för Tableau Cloud i inbäddad kod (t.ex. för att peka på platsen för JavaScript-API:et) använder du URL:en https://online.tableau.com.
Använda Tableau JavaScript
Följande kod är ett exempel på inbäddad kod som genereras när du klickar på Dela för en publicerad vy. Specialtecken i host_url
-parametern är URL-kodade, och tecknen i site_root
- och name
-parametrarna använder NCR-notation (numeriska teckenreferenser) för HTML.
Exempel för Tableau Server:
<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> <param name='site_root' value=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
Exempel för Tableau Cloud:
<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> <param name='site_root' value='/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /> </object> </div>
Källan för <script>
-taggen är URL:en för Tableau Server JavaScript- och Tableau Cloud JavaScript-filen viz_v1.js. JavaScript-filen hanterar monteringen av den fullständiga URL:en för vyn som visas för användarna. name
- och site_root
-objektparametrarna är de enda obligatoriska parametrarna. Alla andra parametrar är valfria.
Ange URL:en för vyn
Här är ett exempel på hur du bäddar in samma vy med hjälp av en iframe, där källan är URL:en som du får när du klickar på Dela för en vy och sedan på Kopiera länk.
Exempel för Tableau Server:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Exempel för Tableau Cloud:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
URL-parametern embed
är obligatorisk. Om du vill kan du lägga till parametrar som bland annat styr verktygsfälts- och återställningsalternativen. Du kan också tillämpa filter på URL:en som styr vilka specifika data som visas när en vy blir inläst.
Tips: Lägg till HTML-attributet allowfullscreen="true"
i iframe-elementet när du använder den här metoden, så att knappen för helskärmsläge aktiveras för vyn.