Tableau如何嵌入HTML

本文轉載自查看原文 2019-09-06 16:56 1641

原文地址：https://blog.csdn.net/read_you2011/article/details/81476108

作者：read_you2011

說明

作為領先的數據可視化工具，Tableau具有許多理想的和獨特的功能。其強大的數據發現和探索應用程序允許您在幾秒鍾內回答重要的問題。您可以使用Tableau的拖放界面可視化任何數據，探索不同的視圖，甚至可以輕松地將多個數據庫組合在一起。它不需要任何復雜的腳本。任何理解業務問題的人都可以通過相關數據的可視化來解決。分析完成后，與其他人共享就像發布到Tableau Server一樣簡單。

網上很少tableau中文對接資料，本人研究以后，寫下此文與大家共同學習。Tableau對接有多種方式，包括restAPi ，js_api。本文主要介紹TableAu網頁嵌入流程。

TableAu相關資料

Tableau教程

https://www.w3cschool.cn/tableau/tableau_overview.html

對接資料

RESTAPI：https://onlinehelp.tableau.com/current/api/rest_api/en-us/help.htm#REST/rest_api_samples.htm%3FTocPath%3D_____5

JavascriptApi：

https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm

js_api sample:

https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_samples.htm

嵌入原理

1）用戶訪問web服務器

2） web服務器請求tableau 服務器獲取ticket 地址（TableAu需添加可信任站點，見下文）

3）tableau 返回ticket （24位字符串），失敗返回-1

4） web服務器將ticket返回到客戶端

5）客戶端用ticket取請求tableau服務器視圖

6） tableau 返回視圖顯示

添加可信任站點（注：tableau版本不同添加方式不同）

在嵌入原理步驟②中，需在TableAu服務器中添加可信任站點才能成功返回ticket。

1.tableau10.1添加方式

tableau服務器中添加web服務器ip地址　

切換到tableau安裝目錄/bin 文件夾下　

cd /d C:\Program Files\Tableau\Tableau Server\10.1\bin 　

停止服務 tabadmin stop 　

添加可信任站點 tabadmin set wgserver.trusted_hosts "<trusted IP addresses or host names>" 　

例：tabadmin set wgserver.trusted_hosts "192.168.1.101, 192.168.1.102, 192.168.1.103" 　

注：多個ip或主機之前必須用逗號+空格分開　

保存配置 tabadmin config 　

啟動tableau服務 tabadmin start

2.tableau2018.2 添加方式

在tableau2018.2中添加了TSM管理器可以方便對tableau進行維護工作，具體功能本文不做介紹。

通過TSM管理器添加可信任站點

登錄TSM管理器，地址：https://tableauserver:8850 ，其中tableauserver 為tableau服務器ip或域名，用戶名密碼為安裝時設置的TSM用戶密碼

前端代碼部分

<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript API Tutorial</title>
  <link type="text/css" rel="stylesheet" href="https://onlinehelp.tableau.com/samples/en-us/js_api/css/smoothness/jquery-ui-1.10.0.custom.css">
  <link type="text/css" rel="stylesheet" href="https://onlinehelp.tableau.com/samples/en-us/js_api/css/Modern.css">
  <link type="text/css" rel="stylesheet" href="https://onlinehelp.tableau.com/samples/en-us/js_api/css/tutorial.css">
  <script type="text/javascript" src="https://onlinehelp.tableau.com/samples/en-us/js_api/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="https://onlinehelp.tableau.com/samples/en-us/js_api/jquery-ui-1.10.0.custom.js"></script>
  <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
  <script type="text/javascript" src="https://onlinehelp.tableau.com/samples/en-us/js_api/tutorial.js"></script>
  <script type="text/javascript">
   
  </script>
</head>
<body>
 
<div id="tableauViz" class="ui-widget-content ui-corner-all" style="display: block;width:100%;height:100%;">
    <p style="margin-left: 12px">The view will load here after you click <b>Run this code</b>, below.</p>
</div>
<script type='text/javascript'>
    var userName='administrator';//tableAu用戶
    $.ajax({
        url: "/tableau/getTableauTrustedUrl.do",
        data: {
            username: userName //userName為tableAu用戶
        },
        type: "POST",
        dataType: "json",
        cache: false,
        success: function(data) {
            if(data.status == 'y') {
                //加載tableau頁面,data.data為服務器返回trustedUrl，即為http://<tableAu服務器域名>/trusted/<ticket>
                initializeViz(data.data);
            } else {
                alert("驗證失敗");
            }
        }
    });
    
    //trustedUrl 為http://<tableAu服務器域名>/trusted/<ticket>
    function initializeViz(trustedUrl){
        //view 為tableau視圖地址，
        //若tableau地址為http://tableau.by.com/#/views/KA_0/sheet0?:iid=3，則tableau的視圖地址為KA_0/sheet0，
        var view = '${model.VIEW_NAME}';
        var placeholderDiv = document.getElementById("tableauViz");
        var url =  trustedUrl+'views/'+view+'?:embed=yes&:toolbar=true'
        var options = {
            width: placeholderDiv.offsetWidth,
            height: placeholderDiv.offsetHeight,
            hideTabs: true,
            hideToolbar: true,
            onFirstInteractive: function() {
                workbook = viz.getWorkbook();
                activeSheet = workbook.getActiveSheet();
            }
        };
        viz = new tableau.Viz(placeholderDiv, url, options);
    }
</script>
</body>
</html>

服務端代碼

@RequestMapping("/getTableauTrustedUrl.do")
    @ResponseBody
    public Object getTableauTrustedUrl(HttpServletRequest request,String username){
        //tableau服務器地址，例 http://tableau.ceshi.com
        final String wgserver = configPropertiesConfiguration.getString("tableau.server.location");
        String ticket = null;
        try {
            ticket = getTrustedTicket(wgserver, username, request.getRemoteAddr());
        } catch (ServletException e) {
            logger.error("獲取tableau ticket 失敗。 ",e);
        }
        if ( !ticket.equals("-1") ) {
            String url = request.getRequestURL().toString();
            url = url.substring(0,url.indexOf(request.getRequestURI()));
          return new AjaxInfo(url + "/trusted/" + ticket + "/");
        }
        return new AjaxInfo(AjaxInfo.STATUS_NO,"");
    }
 
 
    /**
    *請求tableau服務器獲取ticket
    */
    private String getTrustedTicket(String wgserver, String user, String remoteAddr)
            throws ServletException
    {
        OutputStreamWriter out = null;
        BufferedReader in = null;
        try {
            // Encode the parameters
            StringBuffer data = new StringBuffer();
            data.append(URLEncoder.encode("username", "UTF-8"));
            data.append("=");
            data.append(URLEncoder.encode(user, "UTF-8"));
            data.append("&");
            data.append(URLEncoder.encode("client_ip", "UTF-8"));
            data.append("=");
            data.append(URLEncoder.encode(remoteAddr, "UTF-8"));
 
            // Send the request
            URL url = new URL("http://" + wgserver + "/trusted");
            URLConnection conn = url.openConnection();
            conn.setDoOutput(true);
            out = new OutputStreamWriter(conn.getOutputStream());
            out.write(data.toString());
            out.flush();
 
            // Read the response
            StringBuffer rsp = new StringBuffer();
            in = new BufferedReader(new InputStreamReader(conn.getInputStream()));
            String line;
            while ( (line = in.readLine()) != null) {
                rsp.append(line);
            }
 
            return rsp.toString();
 
        } catch (Exception e) {
            throw new ServletException(e);
        }
        finally {
            try {
                if (in != null) in.close();
                if (out != null) out.close();
            }
            catch (IOException e) {}
        }
    }

原文地址：https://blog.csdn.net/read_you2011/article/details/81476108

作者：read_you2011

原文地址：https://blog.csdn.net/read_you2011/article/details/81476108
作者：read_you2011
說明作為領先的數據可視化工具，Tableau具有許多理想的和獨特的功能。其強大的數據發現和探索應用程序允許您在幾秒鍾內回答重要的問題。您可以使用Tableau的拖放界面可視化任何數據，探索不同的視圖，甚至可以輕松地將多個數據庫組合在一起。它不需要任何復雜的腳本。任何理解業務問題的人都可以通過相關數據的可視化來解決。分析完成后，與其他人共享就像發布到Tableau Server一樣簡單。
網上很少tableau中文對接資料，本人研究以后，寫下此文與大家共同學習。Tableau對接有多種方式，包括restAPi ，js_api。本文主要介紹TableAu網頁嵌入流程。
TableAu相關資料Tableau教程
https://www.w3cschool.cn/tableau/tableau_overview.html
對接資料
RESTAPI：https://onlinehelp.tableau.com/current/api/rest_api/en-us/help.htm#REST/rest_api_samples.htm%3FTocPath%3D_____5
JavascriptApi：
https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm
js_api sample:
https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_samples.htm
嵌入原理

1）用戶訪問web服務器
2） web服務器請求tableau 服務器獲取ticket 地址（TableAu需添加可信任站點，見下文）
3）tableau 返回ticket （24位字符串），失敗返回-1
4） web服務器將ticket返回到客戶端
5）客戶端用ticket取請求tableau服務器視圖
6） tableau 返回視圖顯示

添加可信任站點（注：tableau版本不同添加方式不同）在嵌入原理步驟②中，需在TableAu服務器中添加可信任站點才能成功返回ticket。
1.tableau10.1添加方式
tableau服務器中添加web服務器ip地址　
切換到tableau安裝目錄/bin 文件夾下　
cd /d C:\Program Files\Tableau\Tableau Server\10.1\bin 　
　
停止服務 tabadmin stop 　
　
添加可信任站點 tabadmin set wgserver.trusted_hosts "<trusted IP addresses or host names>" 　
例：tabadmin set wgserver.trusted_hosts "192.168.1.101, 192.168.1.102, 192.168.1.103" 　
注：多個ip或主機之前必須用逗號+空格分開　

保存配置 tabadmin config 　

啟動tableau服務 tabadmin start

2.tableau2018.2 添加方式
在tableau2018.2中添加了TSM管理器可以方便對tableau進行維護工作，具體功能本文不做介紹。
通過TSM管理器添加可信任站點
登錄TSM管理器，地址：https://tableauserver:8850 ，其中tableauserver 為tableau服務器ip或域名，用戶名密碼為安裝時設置的TSM用戶密碼

點擊【配置】->【用戶身份和訪問】->【受信任的身份和驗證】添加可信任站點如下圖

應用更改並重啟服務器，（大約需要等待5-8分鍾）

前端頁面代碼<html><head> <meta charset="utf-8"> <title>JavaScript API Tutorial</title> <link type="text/css" rel="stylesheet" href="https://onlinehelp.tableau.com/samples/en-us/js_api/css/smoothness/jquery-ui-1.10.0.custom.css"> <link type="text/css" rel="stylesheet" href="https://onlinehelp.tableau.com/samples/en-us/js_api/css/Modern.css"> <link type="text/css" rel="stylesheet" href="https://onlinehelp.tableau.com/samples/en-us/js_api/css/tutorial.css"> <script type="text/javascript" src="https://onlinehelp.tableau.com/samples/en-us/js_api/jquery-1.9.1.js"></script> <script type="text/javascript" src="https://onlinehelp.tableau.com/samples/en-us/js_api/jquery-ui-1.10.0.custom.js"></script> <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script> <script type="text/javascript" src="https://onlinehelp.tableau.com/samples/en-us/js_api/tutorial.js"></script> <script type="text/javascript"> </script></head><body> <div id="tableauViz" class="ui-widget-content ui-corner-all" style="display: block;width:100%;height:100%;"> <p style="margin-left: 12px">The view will load here after you click <b>Run this code</b>, below.</p></div><script type='text/javascript'> var userName='administrator';//tableAu用戶$.ajax({url: "/tableau/getTableauTrustedUrl.do",data: {username: userName //userName為tableAu用戶},type: "POST",dataType: "json",cache: false,success: function(data) {if(data.status == 'y') {//加載tableau頁面,data.data為服務器返回trustedUrl，即為http://<tableAu服務器域名>/trusted/<ticket>initializeViz(data.data);} else {alert("驗證失敗");}}});//trustedUrl 為http://<tableAu服務器域名>/trusted/<ticket>function initializeViz(trustedUrl){//view 為tableau視圖地址，//若tableau地址為http://tableau.by.com/#/views/KA_0/sheet0?:iid=3，則tableau的視圖地址為KA_0/sheet0，var view = '${model.VIEW_NAME}';var placeholderDiv = document.getElementById("tableauViz");var url = trustedUrl+'views/'+view+'?:embed=yes&:toolbar=true'var options = {width: placeholderDiv.offsetWidth,height: placeholderDiv.offsetHeight,hideTabs: true,hideToolbar: true,onFirstInteractive: function() {workbook = viz.getWorkbook();activeSheet = workbook.getActiveSheet();}};viz = new tableau.Viz(placeholderDiv, url, options);}</script></body></html>
服務器端部分代碼 @RequestMapping("/getTableauTrustedUrl.do") @ResponseBody public Object getTableauTrustedUrl(HttpServletRequest request,String username){ //tableau服務器地址，例 http://tableau.ceshi.com final String wgserver = configPropertiesConfiguration.getString("tableau.server.location"); String ticket = null; try { ticket = getTrustedTicket(wgserver, username, request.getRemoteAddr()); } catch (ServletException e) { logger.error("獲取tableau ticket 失敗。 ",e); } if ( !ticket.equals("-1") ) { String url = request.getRequestURL().toString(); url = url.substring(0,url.indexOf(request.getRequestURI())); return new AjaxInfo(url + "/trusted/" + ticket + "/"); } return new AjaxInfo(AjaxInfo.STATUS_NO,""); } /** *請求tableau服務器獲取ticket */ private String getTrustedTicket(String wgserver, String user, String remoteAddr) throws ServletException { OutputStreamWriter out = null; BufferedReader in = null; try { // Encode the parameters StringBuffer data = new StringBuffer(); data.append(URLEncoder.encode("username", "UTF-8")); data.append("="); data.append(URLEncoder.encode(user, "UTF-8")); data.append("&"); data.append(URLEncoder.encode("client_ip", "UTF-8")); data.append("="); data.append(URLEncoder.encode(remoteAddr, "UTF-8")); // Send the request URL url = new URL("http://" + wgserver + "/trusted"); URLConnection conn = url.openConnection(); conn.setDoOutput(true); out = new OutputStreamWriter(conn.getOutputStream()); out.write(data.toString()); out.flush(); // Read the response StringBuffer rsp = new StringBuffer(); in = new BufferedReader(new InputStreamReader(conn.getInputStream())); String line; while ( (line = in.readLine()) != null) { rsp.append(line); } return rsp.toString(); } catch (Exception e) { throw new ServletException(e); } finally { try { if (in != null) in.close(); if (out != null) out.close(); } catch (IOException e) {} } }原文地址：https://blog.csdn.net/read_you2011/article/details/81476108
作者：read_you2011————————————————版權聲明：本文為CSDN博主「read_you2011」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/read_you2011/article/details/81476108

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Tableau Tableau Tableau html5-嵌入圖片 Extjs嵌入html SVG嵌入HTML python畫圖嵌入html SVG嵌入HTML 如何將圖片嵌入到Html中二、HTML嵌入JavaScript腳本（了解）