Einbetten von Dashboards

Anwendungsbereich: Tableau Cloud, Tableau Server

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 zu gerätespezifischen Layouts und Dashboardgrößen finden Sie unter Configure Embedding Objects and Components 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).

Einbetten von Dashboards mit früheren Einbettungsversionen

Sie können ein Tableau-Dashboard in Ihre eigene Website oder Wiki-Seite einbetten und es je nach Größe des Iframes in verschiedenen Layouts anzeigen lassen.

  • Damit automatisch das richtige Layout für Ihre Benutzer angezeigt wird, und zwar unabhängig vom von ihnen verwendeten Gerät, müssen Sie in Tableau Desktop gerätespezifische Layouts auf Ihr Dashboard anwenden. Wenn Sie dies tun, zeigen Tableau Server und Tableau Cloud automatisch das richtige Layout basierend auf der IFrame-Größe an, vorausgesetzt, dass Sie die Einstellung "100 %" für die Breite und Höhe des IFrames anstatt der exakten Pixelwerte verwenden (siehe unten).
  • Verwenden Sie den Parameter device in Ihrem Einbettungscode, damit immer ein bestimmtes Layout unabhängig von der IFrame-Größe angezeigt wird.

Im folgenden Beispiel zeigt der Einbettungscode ein Dashboard mit einer Breite von 800 Pixeln und einer Höhe von 600 Pixeln an. Der Standard-Einbettungscode, den Sie bei Klicken auf die Schaltfläche Teilen oben in einer Ansicht oder eines Dashboard erhalten, beinhaltet exakte Höhen- und Breitenwerte:

<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 diesem Beispiel, in dem das Dashboard über gerätespezifische Layouts verfügt, wurden die "style"-Attribute für "div class" entfernt, und die "objekt class"-Werte für die Breite und die Höhe wurden durch "100%" ersetzt. In den meisten Fällen wird das richtige Layout angezeigt, sofern die Breite und die Höhe nicht noch an anderer Stelle in Ihrem CSS gesteuert werden.

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

Wenn das richtige Layout nicht angezeigt wird, hat die HMTL-Seite, die Sie für die Einbettung verwenden, möglicherweise einen <!DOCTYPE html>-Tag, der die Größenveränderung auf 100 % von Elementen im Textkörper der Seite verhindert (siehe Details zu Stack Overflow(Link wird in neuem Fenster geöffnet)). Fügen Sie die folgenden Zeilen in den Textkörper Ihrer HTML-Seite ein, um dies zu umgehen:

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

Im folgenden Beispiel wird davon ausgegangen, dass das eingebettete Dashboard über gerätespezifische Layouts verfügt. Der Parameter device ist auf phone festgelegt. Demnach wird, unabhängig davon, auf welchem Gerät das Dashboard angezeigt wird, das von Ihnen für Telefone erstellte Layout angezeigt.

<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-Abmessungen und Geräte-Layouts

Das von einem Gerät angezeigte Dashboard-Layout basiert auf der kleinsten Dimension (Höhe oder Breite) des iFrame, in dem die Tableau-Anzeige erscheint. Mitunter können Layouts für Desktops, Tablets oder Mobiltelefone auf anderen Gerätetypen angezeigt werden. Ein Tablet-Layout kann möglicherweise auf einem Desktop-Computer angezeigt werden, wenn das Anzeige- oder Browserfenster klein ist.

Wenn die kleinste iFrame-Abmessung ...Wird dieses Geräte-Layout wie folgt angezeigt ...
500 Pixel oder wenigerTelefon
Zwischen 501 und 800 PixelTablet
Größer als 800 PixelDesktop

Ausführliche Informationen über das Erstellen eines Dashboards, das über gerätespezifische Layouts verfügt, finden Sie im Abschnitt Erstellen von Dashboard-Layouts für unterschiedliche Gerätetypen.

Zurück zum Anfang
Vielen Dank für Ihr Feedback!Ihr Feedback wurde erfolgreich übermittelt. Vielen Dank.