Schreiben von Einbettungscode für Ansichten
Der Einbettungscode für Tableau Server 2022.3 und höher und Tableau Cloud wurde geändert, um Embedding API v3 zu verwenden. Aktuelle Informationen zum Einbetten einer Ansicht mit Embedding API v3 finden Sie unter Basic Embedding in der Embedding API-Hilfe. Die Informationen in diesem Thema beziehen sich auf frühere Einbettungsversionen (unter Verwendung der Tableau-JavaScript-API v1 und v2).
Beim Schreiben von eigenem Einbettungscode können Sie einen von zwei Ansätzen verfolgen:
Verwendung von Tableau JavaScript: Dies ist der bevorzugte Ansatz. Sie können den von Tableau generierten Einbettungscode als Ausgangspunkt für eigenen Code verwenden und Objektparameter hinzufügen oder bearbeiten, um Symbolleisten, Registerkarten usw. zu steuern. Der Standardeinbettungscode, der auf einer Tableau JavaScript-Datei beruht, ist zudem die einzige Möglichkeit, die Reihenfolge zu steuern, in der mehrere eingebettete Ansichten geladen werden.
Geben Sie die URL der Ansicht an: Integrieren Sie eine Ansicht mit einem Iframe- oder Image-Tag, wobei die Quelle die URL ist, die Sie erhalten, wenn Sie in einer Ansicht auf Teilen und dann auf Link kopieren klicken. Sie sollten so vorgehen, wenn Sie auf Ihrer Website kein JavaScript verwenden können. Es kann auch Fälle geben, in denen Sie einzig und allein eine URL festlegen können.
Definieren Sie beim Einbetten die Breite und die Höhe, in der die Ansicht dargestellt werden soll. Ansonsten legt der Client-Browser willkürlich eine Breite und Höhe fest.
Hinweis: Wenn Sie den Servernamen für Tableau Cloud in einem Einbettungscode angeben müssen (um beispielsweise auf den Speicherort der JavaScript API zu verweisen), verwenden Sie die URL https://online.tableau.com.
Verwendung von Tableau JavaScript
Der folgende Code zeigt ein Beispiel für eingebetteten Code, der beim Klicken auf Freigeben in einer veröffentlichten Ansicht generiert wird. Sonderzeichen im Parameter host_url sind URL-codiert, während Sonderzeichen in den Parametern site_root und name als HTML-Referenzen für numerische Zeichen angegeben werden.
Tableau Server-Beispiel:
<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>
Tableau Cloud-Beispiel:
<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>
Die Quelle für das <script>-Tag ist die URL für die Tableau Server- und Tableau Cloud-JavaScript-Datei viz_v1.js. Die JavaScript-Datei dient zum Zusammenstellen der vollständigen URL der Ansicht, die für Ihre Benutzer angezeigt wird. Die Objektparameter name und site_root sind die einzigen erforderlichen Parameter, alle anderen Parameter sind optional.
Geben Sie die Ansichts-URL an.
Hier ist ein Beispiel für die Einbettung der gleichen Ansicht mit einem Iframe, wobei die Quelle die URL ist, die Sie erhalten, wenn Sie in einer Ansicht auf Teilen und dann auf Link kopierenklicken.
Tableau Server-Beispiel:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Tableau Cloud-Beispiel:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Der URL-Parameter embed ist erforderlich, und Sie können optionale Parameter angeben, mit denen Sie beispielsweise die Symbolleiste und Wiederherstellungsoptionen steuern. Zudem können Sie der URL Filter hinzufügen, um zu steuern, welche Daten in der geladenen Ansicht angezeigt werden.
Tipp: Fügen Sie bei Verwendung dieser Methode das HTML-Attribut allowfullscreen="true" zum Iframe-Element hinzu, um die Schaltfläche Vollbild in der Ansicht zu aktivieren.