You*_*ong 3 html javascript tableau-api drop-down-menu
我理解到可以使用看起来像这样的HTML代码嵌入tableau视图:
<script type="text/javascript" src="http://tableau/javascripts/api/viz_v1.js">
<div id="tableau_view" class="tableauPlaceholder" style="width:1028px; height:804px;">
<object class="tableauViz" width="1028" height="804" style="display:none;">
<param name="host_url" value="http%3A%2F%2Ftableau%2F" />
<param name="site_root" value="" />
<param name="name" id="wbName" value="view_0/view_0" />
<param name="tabs" value="no" />
<param name="toolbar" value="yes" />
</object>
</div>
我想要做的是生成一个包含下拉菜单的页面,其中包含"name"参数的值.基本上,当我在下拉列表中选择一个值时,将使用与所选值关联的tableau viz刷新页面的片段.我一直在努力解决这个问题,因为我自己还在学习JavaScript.
这就是我现在所拥有的:
<html>
<head>
<meta charset="utf-8">
<title>Tableau Test</title>
<script type="text/javascript" src="http://tableau/javascripts/api/viz_v1.js">
function selectViz() {
var mylist=document.getElementById("tableau_workbook");
var wbName=document.getElementByName("name");
wbName.setAttribute("value",mylist.options[mylist.selectedIndex].value);
}
</script>
</head>
<body>
<form>
<!-- Dropdown Menu, the value corresponds with those found in the "name" parameter in the tableau view code -->
<select id="tableau_workbook" onchange="selectViz()" >
<option>Choose Workbook</option>
<option value="view_0/view_0">bioapps_single</option>
<option value="view_1/view_1">bioapps_merged</option>
</select>
<!-- Tableau view goes here -->
<div id="tableau_view" class="tableauPlaceholder" style="width:1028px; height:804px;" >
<object class="tableauViz" width="1028" height="804" style="display:none;">
<param name="host_url" value="http%3A%2F%2Ftableau%2F" />
<param name="site_root" value="" />
<param name="name" value="view_0/view_0" />
<param name="tabs" value="no" />
<param name="toolbar" value="yes" />
</object>
</div>
</form>
</body>
</html>
此时我无法访问Tableau JavaScript API,因此我尝试使用原始HTML/JavaScript执行所有操作.不确定我是否正确行事.非常感谢您的帮助.
谢谢,
年轻
我想我会发布我创建的代码作为其他人的参考,以查看他们是否遇到了与我相同的棘手情况.就像我提到的,我已经找到了访问tableau javascript api的方法,下面的代码正在使用它.请注意,这是用于在网页中嵌入视图.在Confluence Wiki页面中执行此操作的方式略有不同,此处对此进行了描述.
这是代码:
<html>
<head>
<meta charset="utf-8">
<title>Tableau Test</title>
<script type="text/javascript" src="http://tableau/javascripts/api/tableau_v8.js"></script>
<script type="text/javascript">
function selectViz() {
var mylist=document.getElementById("workbook_selection");
wbValue = mylist.options[mylist.selectedIndex].value;
wbTagQuote = wbValue;
initializeViz(wbTagQuote);
}
function initializeViz(wbTagQuote){
var placeholderDiv = document.getElementById("tableauViz");
var url = wbTagQuote;
var options = {
width: placeholderDiv.offsetWidth,
height: placeholderDiv.offsetHeight,
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
var viz = new tableauSoftware.Viz(placeholderDiv, url, options);
}
</script>
</head>
<body>
<form>
<!-- Dropdown Menu, the value corresponds with those found in the "name" parameter in the tableau view code -->
<select id="workbook_selection" onchange="selectViz()">
<option>Choose Workbook</option>
<option value="view_0/view_0">view_0</option>
<option value="view_1/view_1">view_1</option>
</select>
<!-- Tableau view goes here -->
<div id="tableauViz" style="height:1200px; width:1200px"\"></div>
</form>
</body>
</html>
重要提示:在选项值下,您将链接插入到您的画面视图(即"http://"后跟tableau_server_name/path_to_view).此外,当前状态下拉菜单没有完全正常运行...当选择第一个元素时,当您尝试加载另一个视图时,它将无法正常工作......我试图解决这个问题.
| 归档时间： |
|
| 查看次数： |
23511 次 |
| 最近记录： |