Incorporare le dashboard

Applicabile a: Tableau Cloud, Tableau Server

Il codice di incorporamento per Tableau Server 2022.3 e versioni successive e Tableau Cloud è cambiato per consentire l’uso dell’API di incorporamento v3. Per informazioni aggiornate sui layout specifici di dispositivo e dimensionamento della dashboard, consulta Configurare oggetti e componenti di incorporamento nella Guida dell’API di incorporamento. Le informazioni in questo argomento si riferiscono a versioni precedenti dell’incorporamento (con l’API JavaScript v1 e v2 Tableau).

Incorporare dashboard con versioni precedenti dell’incorporamento

È possibile incorporare una dashboard di Tableau nel tuo sito Web o pagina wiki e puoi visualizzarla con layout diversi, in base alle dimensioni dell’iframe.

  • Per visualizzare automaticamente il layout corretto per i tuoi utenti, indipendentemente dal dispositivo in uso, crea layout specifici per i dispositivi dalla tua dashboard di Tableau Desktop. In questo modo, Tableau Server e Tableau Cloud mostreranno automaticamente il layout giusto in base alle dimensioni dell’iframe, purché tu utilizzi il 100% della larghezza e dell’altezza dell’iframe, anziché valori di pixel esatti (vedi sotto).
  • Per visualizzare sempre un layout specifico, indipendentemente dalle dimensioni dell’iframe, utilizza il parametro device nel codice di incorporamento.

Nell’esempio seguente, il codice di incorporamento visualizza una dashboard di 800 pixel di larghezza per 600 di altezza. I valori di larghezza e altezza esatti fanno parte del codice di incorporamento predefinito che ottieni quando fai clic sul pulsante Condividi nella parte superiore di una vista o di una 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 questo esempio, in cui la dashboard utilizza layout specifici per i dispositivi, gli attributi di stile per la classe div sono stati rimossi e i valori di larghezza e altezza della classe oggetto sono stati sostituiti con il 100%. Nella maggior parte dei casi, viene visualizzato il layout corretto, a condizione che la larghezza e l’altezza non siano già controllate altrove nel tuo 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>

Se il layout corretto non viene visualizzato, è possibile che la pagina HTML che stai usando per l’incorporamento presenti un tag <!DOCTYPE html> e che tale tag impedisca il ridimensionamento al 100% degli elementi nel corpo della pagina (vedi dettagli su overflow dello stack(Il collegamento viene aperto in una nuova finestra)). Una soluzione alternativa è quella di aggiungere le righe seguenti al corpo della pagina HTML:

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

Nell’esempio seguente si presuppone che la dashboard incorporata disponga di layout specifici dei dispositivi. Il parametro device è impostato su phone. Ciò significa che, indipendentemente dal dispositivo che visualizza la dashboard, il layout creato per i telefoni sarà quello visualizzato.

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

Dimensioni iframe layout dispositivi

Il layout della dashboard visualizzato da un dispositivo si basa sulla dimensione più piccola (altezza o larghezza) dell’iframe in cui viene visualizzata la vista di Tableau. A volte i layout di desktop, tablet o telefono possono essere visualizzati su altri tipi di dispositivi. Ad esempio, un layout per tablet può essere visualizzato sul desktop di un computer se lo schermo o la finestra del browser è piccola.

Se la dimensione minima iframe è...Verrà visualizzato il layout dispositivo...
500 pixel o menoTelefono
Tra 501 e 800 pixelTablet
Più di 800 pixelDesktop

Per informazioni dettagliate su come creare una dashboard che utilizzi layout specifici dei dispositivi, consulta Crea layout di dashboard per diversi tipi di dispositivi.

Torna in alto
Grazie per il tuo feedback.Il tuo feedback è stato inviato. Grazie!