대시보드 내장

적용 대상: Tableau Cloud, Tableau Server

Tableau Server 2022.3 이상 및 Tableau Cloud의 내장 코드가 Embedding API v3을 사용하도록 변경되었습니다. 기기별 레이아웃 및 대시보드 크기 조정에 대한 최신 정보는 Embedding API 도움말에서 내장 개체 및 구성 요소 구성(영문)을 참조하십시오. 본 항목의 정보는 이전 버전의 Embedding(Tableau JavaScript API v1 및 v2 사용)에 대한 것입니다.

이전 버전의 Embedding을 사용하여 대시보드 내장

자신이 소유한 웹 사이트나 Wiki 페이지에 Tableau 대시보드를 내장할 수 있으며 iframe 크기를 기준으로 다양한 레이아웃을 사용하여 대시보드를 표시할 수 있습니다.

  • 사용하는 기기에 관계없이 사용자에게 올바른 레이아웃이 자동으로 나타나게 하려면 Tableau Desktop에서 대시보드에 대해 기기별 레이아웃을 만듭니다. 그러면 iframe의 너비와 높이에 대해 정확한 픽셀 값 대신 100%를 사용하는 경우 Tableau Server 및 Tableau Cloud에서 iframe 크기에 기반하여 올바른 레이아웃이 자동으로 표시됩니다(아래 참조).
  • iframe 크기에 관계없이 항상 특정 레이아웃이 나타나게 하려면 내장 코드에서 device 매개 변수를 사용합니다.

다음 예제의 내장 코드는 너비가 800픽셀이고 높이가 600픽셀인 대시보드를 표시합니다. 정확한 너비 및 높이 값은 뷰 또는 대시보드 상단의 공유 단추를 클릭할 때 표시되는 기본 내장 코드에 포함되어 있습니다.

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

대시보드에서 기기별 레이아웃을 사용하는 이 예에서는 div 클래스의 style 속성이 제거되었으며 width 및 height에 대한 개체 클래스 값이 100%로 대체되었습니다. 대부분의 경우 올바른 레이아웃이 표시되며, 이는 너비와 높이가 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>

올바른 레이아웃이 표시되지 않는 경우 내장에 사용 중인 HTML 페이지에 있는 <!DOCTYPE html> 태그로 인해 페이지 본문의 항목 크기를 100%로 조정할 수 없기 때문일 수 있습니다(스택 오버플로 세부 정보(링크가 새 창에서 열림) 참조). 이 경우 HTML 페이지 본문에 다음 줄을 추가하면 문제를 해결할 수 있습니다.

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

다음 예제에서는 내장 대시보드에 기기별 레이아웃이 있다고 가정합니다. device 매개 변수는 phone으로 설정되어 있습니다. 이것은 어떤 기기에 대시보드가 표시되더라도 전화용으로 생성된 레이아웃이 표시되는 레이아웃이 된다는 의미입니다.

<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 크기 및 기기 레이아웃

기기에 표시되는 대시보드 레이아웃은 Tableau 뷰가 나타나는 iframe의 가장 작은 크기(높이 또는 너비)에 기반합니다. 다른 유형의 기기에 데스크톱, 태블릿 또는 스마트폰 레이아웃이 나타날 수 있습니다. 예를 들어 디스플레이 또는 브라우저 창이 작은 경우 데스크톱 컴퓨터에서 태블릿 레이아웃이 나타날 수 있습니다.

가장 작은 iframe 크기...나타나는 기기 레이아웃...
500픽셀 이하전화
501~800픽셀 사이태블릿
800픽셀보다 큼데스크톱

기기별 레이아웃을 사용하는 대시보드를 만드는 방법에 대한 자세한 내용은 서로 다른 기기 유형에 대한 대시보드 레이아웃 만들기를 참조하십시오.

맨 위로 이동
피드백을 제공해 주셔서 감사합니다!귀하의 피드백이 제출되었습니다. 감사합니다!