데이터 분석 프로젝트를 진행하면서 알게 된 아주 좋은 비주얼리제이션 플랫폼인 태블로…
끝없이 구글링해서 대쉬보드까지 뿌듯하게 만들었는데 만들고 나서 생각해보니 ㅋㅋ
이걸 리액트에 연결해서 가져올 수 있나요…?
이번엔 왜 사고 논리가 꼬였지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
보통 React로 웹에서 보여주고 도구를 사용할 수 있다고 생각하지 않습니다 하하..
이번에는 데이터 시각화에 너무 집중했습니다.그래도!! 운 좋게도 React에 연결하여 가져올 수 있는 방법이 있었습니다.
그것도 3개 ㅋㅋ
연결 방법
– Tableau JavaScript API 사용
– Tableau 내장 코드 사용
– iframe + tableau 공유 링크 사용
있다
(그 외에도 더 있을 수 있지만 아래 사이트에 링크해두었습니다.)
https://medium.com/nerd-for-tech/embed-tableau-dashboard-in-react-application-5fc572e3962e
어떻게 선택합니까?
iframe + tableau 공유 링크 사용
이유: 데이터를 분석하고 시각화하는 데 너무 많은 시간을 할애하여 최대한 단순하게 만들려고 했습니다.
나머지 두 가지 방법을 쓰면서 프로젝트를 끝내고 공부해야겠다고 생각했다.
하나. 대시보드를 Tableau Public에 저장하고 공유를 클릭하여 아래와 같이 대시보드를 봅니다. 임베디드 코드/링크 알 수 있다
– 여기서 내장 코드는 위의 두 번째 방법에서 사용됩니다.
iframe을 사용하기 때문에 링크 복사!.
그러면 아래와 같이 매우 긴 링크를 드립니다.
2. React로 이동하여 iframe 태그의 src 속성에 링크를 붙여넣습니다.
– title 속성은 무조건 포함되어야 하므로 포함
– 너비 및 높이 속성을 사용하여 대시보드 크기가 조정됩니다.
그게 다야!! 대시보드가 제대로 열리나요?!
하지만 네, 프로젝트가 잘되면 행복하지 않을 것입니다 …
깨울 수가 없어 부서지고 있어 오류 메시지가 나타납니다…
나는 즉시 달려가 공식 문서를 읽었다.
그는 매우 친절하고 한국어로 자세히 설명합니다.
오류 메시지가 표시되는 이유
(아래 Tableau 웹 사이트 참조)
https://kb.tableau.com/articles/howto/embedding-tableau-public-views-in-iframes?lang=ko-kr
해결하다!!
Tableau Public의 링크를 Ancient~로 가져와서는 안 됩니다. showVizHome=아니요 그리고 포함=참 넣어야한다
잘 헤엄칩니다^^