Question

我理解到可以使用看起来像这样的HTML代码嵌入画面视图：

<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&#47;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&#47;view_0">bioapps_single</option>
        <option value="view_1&#47;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&#47;view_0" />
            <param name="tabs" value="no" />
            <param name="toolbar" value="yes" />
        </object>
    </div>
    </form>
</body>
</html>

此时我无法访问Tableau JavaScript API，因此我尝试使用原始HTML / JavaScript执行所有操作。不确定我是否正确行事。非常感谢您的帮助。

谢谢，

杨

Answer 1

我想我会发布我创建的代码作为其他人的参考，以查看他们是否遇到了与我相同的棘手情况。就像我提到的，我已经找到了访问tableau javascript api的方法，下面的代码正在使用它。请注意，这是用于在网页中嵌入视图。在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&#47;view_0">view_0</option>
        <option value="view_1&#47;view_1">view_1</option>
    </select>
<!-- Tableau view goes here -->
    <div id="tableauViz" style="height:1200px; width:1200px"\"></div>
</form>
</body>
</html>

重要提示：在选项值下，您可以插入指向您的画面视图的链接（即＆＃34; http：//＆＃34;后跟tableau_server_name / path_to_view）。此外，当前状态下拉菜单没有完全正常运行...当选择第一个元素时，当您尝试加载另一个视图时，它将无法正常工作......我试图解决这个问题。

Answer 2

这并不是严格回答您的问题，但如果您无法本地访问Tableau Javascript API，则应该可以使用Tableau公共版本进行测试：

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>

在参考资料方面，请查看以下链接，了解有关如何使用Tableau Javascript API的更多详细信息（我的网络连接现在非常糟糕，所以我明天会发布更多参考链接，并尝试正确回答你的问题）

Javascript API tutorial

使用HTML / JavaScript在网页中嵌入画面视图

2 个答案: