我明白可以使用如下所示的 HTML 代码嵌入画面 View :
<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”参数的值。基本上，当我在下拉列表中选择一个值时，这将使用与所选值关联的画面可视化刷新页面部分。我一直在努力解决这个问题，因为我自己仍在学习 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 的方法，下面的代码正在使用它。请记住，这是为了在网页中嵌入 View 。在 Confluence Wiki 页面中执行此操作的方式略有不同，描述为 here .
代码如下:
<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>
重要提示:在选项值下，您插入到您的画面 View 的链接(即“http://”后跟 tableau_server_name/path_to_view)。此外，当前状态下的下拉菜单未完全正常运行...虽然已选择第一个元素，但当您尝试加载另一个 View 时，它不会工作...我正在尝试解决这个问题。
关于javascript - 使用 HTML/JavaScript 在网页中嵌入画面 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22211148/