뷰의 내장 코드 작성
Tableau Server 2022.3 이상 및 Tableau Cloud의 내장 코드가 Embedding API v3을 사용하도록 변경되었습니다. Embedding API v3을 사용하여 뷰를 내장하는 방법에 대한 최신 정보는 Embedding API 도움말의 내장 기초를 참조하십시오. 본 항목의 정보는 이전 버전의 Embedding(Tableau JavaScript API v1 및 v2 사용)에 대한 것입니다.
직접 내장 코드를 작성할 경우 다음 두 가지 방법 중에서 사용할 수 있습니다.
Tableau JavaScript 사용: 선호되는 방식입니다. 직접 코드 작성을 위한 시작점으로 Tableau이 제공하는 내장 코드를 사용하여 툴바, 탭 등을 제어하는 개체 매개 변수를 추가하거나 편집합니다. Tableau JavaScript 파일 기반 기본 내장 코드만 다중 내장된 뷰의 로드 순서를 제어할 수 있습니다.
뷰 URL 지정: iframe 또는 image 태그를 사용하여 뷰를 내장합니다. 여기서, 원본은 뷰에서 공유를 클릭한 다음 링크 복사를 클릭하여 얻는 URL입니다. 웹 사이트에서 JavaScript를 사용할 수 없는 경우 유용합니다. 지정할 수 있는 것이 URL뿐인 상황도 있을 수 있습니다.
뷰를 내장할 경우 뷰를 표시할 너비와 높이를 정의해야 합니다. 그렇지 않으면 클라이언트 브라우저에 의해 임의의 너비와 높이가 선택됩니다.
참고: 내장 코드에서 Tableau Cloud의 서버 이름을 지정해야 하는 경우(예: JavaScript API의 위치를 가리켜야 하는 경우) URL https://online.tableau.com을 지정합니다.
Tableau JavaScript 사용
다음 코드는 게시된 뷰에서 공유를 클릭할 때 생성되는 내장 코드의 예제를 보여 줍니다. host_url
매개 변수에서 특수 문자는 인코딩된 URL입니다. site_root
및 name
매개 변수에서 특수 문자는 HTML 영숫자 참조로 언급됩니다.
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>
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>
<script>
태그에 대한 원본은 Tableau Server 및 Tableau Cloud JavaScript 파일 viz_v1의 URL입니다. JavaScript 파일은 사용자에게 표시되는 뷰의 전체 URL 어셈블리를 처리합니다. name
및 site_root
개체 매개 변수만 필수 매개 변수이며 다른 모든 매개 변수는 선택 사항입니다.
뷰 URL 지정
다음은 동일한 뷰를 iframe을 사용하여 내장한 예입니다. 여기서, 원본은 뷰에서 공유를 클릭한 다음 링크 복사를 클릭하여 얻는 URL입니다.
Tableau Server 예:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Tableau Cloud 예:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
embed
URL 매개 변수는 필수이며 선택적으로 여러 항목 중에서 툴바 및 되돌리기 옵션을 제어하는 매개 변수를 포함할 수 있습니다. 또한 뷰 로드 시 표시되는 특정 데이터를 제어하는 필터를 URL에 추가할 수 있습니다.
팁: 이 방법을 사용할 때 iframe 요소에 HTML 특성 allowfullscreen="true"
를 추가하여 뷰에서 전체 화면 단추를 사용하도록 설정합니다.