Tableau Public 대시보드를 웹 응용 프로그램에 내장

Tableau Public은 온라인에서 데이터 시각화를 공개적으로 공유하고 탐색할 수 있는 무료 플랫폼입니다. 누구나 무료 Tableau Public Edition을 사용하여 비주얼리제이션을 만들 수 있습니다.

내장 코드를 사용하여 웹 응용 프로그램에 Tableau 공개 대시보드를 내장하는 단계:



1. 로그인 자격 증명을 사용하여 Tableau Public에 로그인합니다.





2. Tableau public에 로그인한 후 기존 대시보드를 열고 "공유" 버튼을 클릭합니다.





3. “공유” 버튼을 클릭하면 공유 팝업 상자가 나타납니다.





4. 그런 다음 공유 팝업 상자에서 Embed 코드를 복사합니다. 간단한 HTML 파일 이름 Test.html을 만들고 복사한 Embed 코드를 HTML 파일의 <body> 태그에 붙여넣습니다.



아래는 참조용 샘플 HTML 코드입니다.

<html>
<head>
  <title>Embedding Tableau public reports into the web application</title>
</head>
<body>
    <div class='tableauPlaceholder' id='viz1609851260284' style='position: relative'>
        <noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TeslaStockPrices_16097083454810&#47;TeslaStockPrice&#47;1_rss.png' style='border: none' /></a>
        </noscript>
        <object class='tableauViz'  style='display:none;'>
        <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> 
        <param name='embed_code_version' value='3' /> 
        <param name='site_root' value='' />
        <param name='name' value='TeslaStockPrices_16097083454810&#47;TeslaStockPrice' />
        <param name='tabs' value='no' /><param name='toolbar' value='yes' />
        <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TeslaStockPrices_16097083454810&#47;TeslaStockPrice&#47;1.png' /> 
        <param name='animate_transition' value='yes' />
        <param name='display_static_image' value='yes' />
        <param name='display_spinner' value='yes' />
        <param name='display_overlay' value='yes' />
        <param name='display_count' value='yes' />
        <param name='language' value='en' />
        </object>
        </div>                
        <script type='text/javascript'>                    
        var divElement = document.getElementById('viz1609851260284');                    
        var vizElement = divElement.getElementsByTagName('object')[0];                    
        if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1300px';vizElement.style.height='927px';} 
        else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1300px';vizElement.style.height='927px';} 
        else { vizElement.style.width='100%';vizElement.style.height='2127px';}                     
        var scriptElement = document.createElement('script');                    
        scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    
        vizElement.parentNode.insertBefore(scriptElement, vizElement);                
        </script>
</body>
</html>



5. Test.html 파일을 저장하고 두 번 클릭합니다.





6. 브라우저에서 열리고 대시보드가 ​​표시됩니다.






Tableau 공개 대시보드를 포함하는 간단한 예였습니다. 다양한 방법으로 웹 애플리케이션에서 Embed 코드를 사용할 수 있습니다.




내 Tableau Public 프로필을 확인하십시오Prashant Kamble.

좋은 웹페이지 즐겨찾기