tableau public URL : https://public.tableau.com/app/profile/sailingstone/viz/_16376473034990/sheet0_1
태블로 퍼블릭에 뷰를 tableau javascript api 를 이용하여 웹 브라우저에 임베딩 해보겠습니다.
우선 이 기능을 사용하기위해선 tableau javascript api를 사용하기 위한 라이브러리가 임포트 되어있어야 합니다.
아래는 예제 코드입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/tableau-2.6.0.min.js"></script>
<body>
<h1>
Tableau javascript visualization
</h1>
<!-- viz 호출 버튼 -->
<button id="viz_load_button">viz호출</button>
<!-- tableau 영역 설정 -->
<div>
<div id="tableau_container" style="height: 100%; width: auto; border: 1px solid #000; margin-top: 20px;">
<div id="tableau" style="height: 100%; width: auto;"></div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#viz_load_button").on("click",function(){
var viz
var tableau_div = document.getElementById("tableau");//태블로 영역 div 설정
var options = { //대시보드 옵션 셋팅
/* width , height 셋팅 */
width: "100%",
height: "100%"
};
/*
viz 생성 예제
new tableau.Viz(tableau_div, url ,options)
*/
viz = new tableau.Viz(tableau_div, "https://public.tableau.com/views/_16376473034990/sheet0_1",options);
})
})
</script>
</html>
html부분에 view가 호출될 영역을 지정해줍니다.
javascript를 통해 option , url , 영역을 담아주고
new tableau.Viz( tableau_div, url, options )를 통해 viz를 생성해줍니다.
감사합니다.
'Tableau' 카테고리의 다른 글
| 태블로 Rank 필터 만들기 (0) | 2021.12.02 |
|---|---|
| Tableau 마크 계층 기능 (0) | 2021.12.01 |
| 태블로 워터폴 차트 만들기 (0) | 2021.11.23 |
| 태블로 도넛 차트 만들기 (0) | 2021.11.22 |
| 태블로 덤벨 차트 만들기 (0) | 2021.11.11 |
