html - 无法刷新表格可视化的 div 标签:HTML + Tableau JS API
问题描述
我正在尝试使用基本的 HTML、Tableau JS API 创建一个分析平台。在这里,我成功地独立获得了可视化,这是我的问题:当第一次选择 div 标签刷新并且如果我选择下一个选项 div 标签不刷新时能够同时看到仪表板
示例-如果在声明上选择-> OPS 报告工作正常,同时
如果我选择 Claims-->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>
解决方案
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>
推荐阅读
- c - 在 ARM 上使用 syslog() 的 C 程序中处理 SIGINT 会导致程序执行向后跳转几行
- android - 如何修复“遇到网络错误后 YoutubePlayer 卡在景观模式”
- deep-learning - 用于回归问题的 Pytorch 全连接前馈网络 - 为所有输入提供相同的结果
- c# - Listview 不显示带有自定义 UserControl 的滚动条
- typescript - 是否可以在 Angular 6 的 UnitTest 规范文件中检查 Inputtext 的最大长度
- react-native - React Native:如何在睡眠之间找到屏幕唤醒时间
- arrays - a[:,None] 和 a[:,] 的区别
- android - 如何从 Service 或 JobIntentService 匿名登录 firebase
- amazon-web-services - 如何通过 aws cli 在组织的 Cloudfront 实例中部署 lambda@edge 代码?
- java - 如何以分贝为单位测量声音...保持 0.0dB