无法刷新tableau可视化的div标签:HTML + Tableau JS API

问题描述 投票:0回答:1

我正在尝试使用基本HTML,Tableau JS API构建分析平台。在这里,我成功地独立获取可视化,这是我的问题:当第一次选择div标签刷新并能够同时看到仪表板如果我选择下一个选项div标签不刷新

示例 - 如果选择索赔 - > OPS报告工作正常,同时

如果我选择Claim - > LSP Report无法看到可视化

/* Menu Styles */
html,body{
height:100%;
width:100%;
}

.third-level-menu
{
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li	
{
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li
{
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #222222;
	
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}

.navbar-inverse {
    background-color: #d9edf7;
    border-color: #d9edf7;
}
/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #151313fa;
    text-decoration: none;
    padding: 0 0 0 10px;
    
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 50px;
	background-color: #d9edf7;
}
.top-level-menu a:hover { color: #000000; }

element.style {
    display: block;
    width: 811px;
    height: 1000px;
    visibility: visible;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Data Visualization</title>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  

	<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
	
	   <script type="text/javascript">
	   
       function ReportARC() {	
						//alert("function1");
						
            var containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/Flights",
                options = {
                    hideTabs: false,
					hideToolbar: true,
                    onFirstInteractive: function () {
                        console.log("Run this code when the viz has finished loading.");
                    }
                };
            
            // Create a viz object and embed it in the container div.
            var viz = new tableau.Viz(containerDiv, url, options); 
				 
		
        }
		
				function ReportOPS() {	
					//alert("function2");
					
					var containerDiv1 = document.getElementById("vizContainer"),
							url1 = "http://public.tableau.com/views/RegionalSampleWorkbook/Obesity",
							options = {
									hideTabs: false,
				hideToolbar: true,
									onFirstInteractive: function () {
											console.log("Run this code when the viz has finished loading.");
									}
							};
					
					// Create a viz object and embed it in the container div.
					var viz1 = new tableau.Viz(containerDiv1, url1, options); 
			

	
			}
			
			function ReportLSP() {	
						
					var containerDiv = document.getElementById("vizContainer"),
							url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
							options = {
									hideTabs: true,
				hideToolbar: true,
									onFirstInteractive: function () {
											console.log("Run this code when the viz has finished loading.");
									}
							};
					
					
					var viz = new tableau.Viz(containerDiv, url, options); 
				
			}
			
			
			function ReportUW() {	
						
					var containerDiv = document.getElementById("vizContainer"),
							url = "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
							options = {
									hideTabs: true,
				hideToolbar: true,
									onFirstInteractive: function () {
											console.log("Run this code when the viz has finished loading.");
									}
							};
					
				
					var viz = new tableau.Viz(containerDiv, url, options); 
				
			}
			
			function ReportSales() {	
								
					
					var containerDiv = document.getElementById("vizContainer"),
							url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
							options = {
									hideTabs: true,
				hideToolbar: true,
									onFirstInteractive: function () {
											console.log("Run this code when the viz has finished loading.");
									}
							};
					
					// Create a viz object and embed it in the container div.
					var viz = new tableau.Viz(containerDiv, url, options); 
				
			}
    </script>
</head>
<body>
<nav class="navbar navbar-inverse" style="background-color:#d9edf7;">
	<a class="navbar-brand" href="#">
   
  </a>
  <div class="container-fluid">    
   <ul class="top-level-menu" style="FLOAT:right;">   
    <li><a href="https://www.google.com target="_blank">About Us</a></li>
    <li>
        <a href="#">Claims</a>
            <ul class="second-level-menu">
               <li><a href="#" onclick="ReportOPS()">OPS REPORT</a></li>
                <li><a href="#" onclick="ReportLSP()">LSP DASHBOARD</a></li>
            <li>
                <a href="#">ARC REPORT</a>
                    <ul class="third-level-menu">
                    <li><a href="#" onclick="ReportARC()">REPORT-1</a></li>
                    <li><a href="#">REPORT-2</a></li>
                    <li><a href="#">REPORT-3</a></li>
                    <li><a href="#">REPORT-4</a></li>
                </ul>
            </li>
           
        </ul>
    </li>
    <li><a href="#" onclick="ReportSales()">Sales</a></li>
	 <li><a href="#" onclick="ReportUW()">Underwriter</a></li>
	  <li><a href="#" onclick="ReportUW()">Finance</a></li>
</ul>
  </div>
</nav>
<div class="vizContainer"></div>
</body>
</html>
html tableau-public
1个回答
0
投票

Ravi,你需要使你的viz对象全局化,然后调用dispose方法来销毁当前渲染的对象。这应该工作:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Data Visualization</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


    <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

       <script type="text/javascript">

        var viz;
      var workbook;
      var containerDiv;

       function ReportARC() {   
                        //alert("function1");

            containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/Flights",
                options = {
                    hideTabs: false,
                                        hideToolbar: true,
                    onFirstInteractive: function () {
                        console.log("Run this code when the viz has finished loading.");
                        //workbook = viz.getWorkbook();
                    }
                };

            // Create a viz object and embed it in the container div.
            viz = new tableau.Viz(containerDiv, url, options); 


        }

                function ReportOPS() {  
                    //alert("function2");

                    containerDiv = document.getElementById("vizContainer"),
                            url = "http://public.tableau.com/views/RegionalSampleWorkbook/Obesity",
                            options = {
                                    hideTabs: false,
                                    hideToolbar: true,
                                    onFirstInteractive: function () {
                                            console.log("Run this code when the viz has finished loading.");
                                            //workbook = viz.getWorkbook();
                                    }
                            };

                    // Create a viz object and embed it in the container div.
                    viz = new tableau.Viz(containerDiv, url, options); 



            }

            function ReportLSP() {  

                    containerDiv = document.getElementById("vizContainer"),
                            url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
                            options = {
                                    hideTabs: true,
                                    hideToolbar: true,
                                    onFirstInteractive: function () {
                                            console.log("Run this code when the viz has finished loading.");
                                            //workbook = viz.getWorkbook();
                                    }
                            };


                    viz = new tableau.Viz(containerDiv, url, options); 

            }


            function ReportUW() {   

                    containerDiv = document.getElementById("vizContainer"),
                            url = "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
                            options = {
                                    hideTabs: true,
                                    hideToolbar: true,
                                    onFirstInteractive: function () {
                                            console.log("Run this code when the viz has finished loading.");
                                            //workbook = viz.getWorkbook();
                                    }
                            };


                    viz = new tableau.Viz(containerDiv, url, options); 

            }

            function ReportSales() {    
                    containerDiv = document.getElementById("vizContainer"),
                            url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
                            options = {
                                    hideTabs: true,
                        hideToolbar: true,
                                    onFirstInteractive: function () {
                                            console.log("Run this code when the viz has finished loading.");
                                            //workbook = viz.getWorkbook();
                                    }
                            };

                    // Create a viz object and embed it in the container div.
                    viz = new tableau.Viz(containerDiv, url, options); 

            }

            function dispose() {

    if (viz == null) {
        console.log("No Viz has been rendered, so I can't dispose anything");
        return;
    } else {
        viz.dispose();
    }
}


    </script>
</head>
<body>
<nav class="navbar navbar-inverse" style="background-color:#d9edf7;">
    <a class="navbar-brand" href="#">

  </a>
  <div class="container-fluid">    
   <ul class="top-level-menu" style="FLOAT:right;">   
    <li><a href="https://www.google.com target="_blank">About Us</a></li>
    <li>
        <a href="#">Claims</a>
            <ul class="second-level-menu">
               <li><a href="#" onclick="dispose();ReportOPS()">OPS REPORT</a></li>
                <li><a href="#" onclick="dispose();ReportLSP()">LSP DASHBOARD</a></li>
            <li>
                <a href="#">ARC REPORT</a>
                    <ul class="third-level-menu">
                    <li><a href="#" onclick="dispose();ReportARC()">REPORT-1</a></li>
                    <li><a href="#">REPORT-2</a></li>
                    <li><a href="#">REPORT-3</a></li>
                    <li><a href="#">REPORT-4</a></li>
                </ul>
            </li>

        </ul>
    </li>
    <li><a href="#" onclick="dispose();ReportSales();">Sales</a></li>
     <li><a href="#" onclick="dispose();ReportUW();">Underwriter</a></li>
      <li><a href="#" onclick="dispose();ReportUW();">Finance</a></li>
</ul>
  </div>
</nav>
<div class="vizContainer"></div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.