使用HTML / JavaScript在网页中嵌入画面视图
[英]Embedding tableau views in webpage using HTML/JavaScript
问题描述
I understand to the point that it is possible to embed the tableau view using an HTML code that looks something like this: 
我理解到可以使用看起来像这样的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>
What I want to do is to generate a page with dropdown menu that contains the value of the "name" parameter. 我想要做的是生成一个包含下拉菜单的页面，其中包含“name”参数的值。 Basically, when I select a value in the dropdown, that would refresh the segment of the page with the tableau viz that is associated with the selected value. 基本上，当我在下拉列表中选择一个值时，将使用与所选值关联的tableau viz刷新页面的片段。 I have been struggling with this for while, as I am still learning JavaScript myself. 我一直在努力解决这个问题，因为我自己还在学习JavaScript。
This is what I have right now: 这就是我现在所拥有的：
<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>
At this point I don't have the access to Tableau JavaScript API, so I am trying to do everything using raw HTML/JavaScript. 此时我无法访问Tableau JavaScript API，因此我尝试使用原始HTML / JavaScript执行所有操作。 Not really sure whether I am doing this right or not. 不确定我是否正确行事。 Your help would be much appreciated. 非常感谢您的帮助。
Thank you, 谢谢，
Young 年轻
2 个解决方案
解决方案1
6 2014-03-12 17:51:40
I think I will post the code that I created as a reference for others to view if they get into the same sticky situation as I did. 我想我会发布我创建的代码作为其他人的参考，以查看他们是否遇到了与我相同的棘手情况。 Like I have mentioned, I have figured out way to access tableau javascript api, and the code below is using it. 就像我提到的，我已经找到了访问tableau javascript api的方法，下面的代码正在使用它。 Please keep in mind this is for embedding the views in a webpage. 请注意，这是用于在网页中嵌入视图。 There is slightly different way of doing this in Confluence Wiki Page, which is described here . 在Confluence Wiki页面中执行此操作的方式略有不同， 此处对此进行了描述。
Here is the code: 这是代码：
<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>
Important: under option value, you insert the link to your tableau view (ie "http://" followed by tableau_server_name/path_to_view). 重要提示：在选项值下，您将链接插入到您的画面视图（即“http：//”后跟tableau_server_name / path_to_view）。 Also, the dropdown menu at current state is not fully functioning...while first element has been selected, when you try to load another view, it will not work...I am trying to figure this out. 此外，当前状态下拉菜单没有完全正常运行...当选择第一个元素时，当您尝试加载另一个视图时，它将无法正常工作......我试图解决这个问题。
解决方案2
1 2014-03-05 23:43:58
This isn't strictly answering your question, but if you don't have local access to the Tableau Javascript API, then it should be possible to test using the Tableau Public version: 这并不是严格回答您的问题，但如果您无法本地访问Tableau Javascript API，则应该可以使用Tableau Public版本进行测试：
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
In terms of reference material, check out the following links for more details on how to use the Tableau Javascript API (my internet connection is terrible right now, so I'll post more reference links tomorrow, and an attempt at properly answering your question) 在参考资料方面，请查看以下链接，了解有关如何使用Tableau Javascript API的更多详细信息（我的网络连接现在非常糟糕，所以我明天会发布更多参考链接，并尝试正确回答您的问题）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.