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

Question

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

3

我理解，可以使用类似于以下 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&#47;view_0" />
    <param name="tabs" value="no" />
    <param name="toolbar" value="yes" />
  </object>
</div>

我希望生成一个包含“name”参数值的下拉菜单的页面。基本上，当我在下拉菜单中选择一个值时，它会刷新与所选值相关联的tableau可视化部分的页面片段。由于我还在学习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完成所有操作。不太确定我是否做得正确。非常感谢您的帮助。

谢谢，

Young

- Young Song

2个回答

1

这并不是严格回答您的问题，但如果您没有访问Tableau Javascript API的本地权限，那么可以使用Tableau Public版本进行测试：

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

关于参考资料，以下链接提供了有关如何使用Tableau Javascript API的更多详细信息（由于我的网络连接很差，所以我明天会发布更多参考链接，并尝试正确回答您的问题）

Javascript API教程

- Talvalin

你好，感谢您的回复。使用Tableau Public版本的唯一问题是展示的数据有些机密。我之前没有在帖子中提到这一点，但是网页是在Confluence Wiki页面内创建的，该页面是为我所在的组织使用的。因此，尽管我很想采用Tableau Public的方式，但这是不可行的。无论如何，再次感谢您。 - Young Song

工作簿必须在某个地方发布后才能嵌入到其他地方。如果您没有使用Tableau Public，那么您是否可以访问Tableau Online或Tableau Server的本地安装？ - Talvalin

是的，我确实有Tableau Server的本地安装。工作簿已经发布在服务器上，只是我想要将这些工作簿嵌入到网站中，正如我之前所描述的那样。 - Young Song

让我重新表达我的问题...我想以某种方式编写JavaScript/HTML代码，使得当我在下拉菜单上选择某个选项时，我可以更改参数"name"的"value"属性。例如，从<param name="name" value="view_1" />更改为<param name="name" value="view_2" />并刷新页面上的Tableau可视化。 - Young Song

虽然使用原始的HTML和Javascript是可能的（我现在无法取得太多成功），但使用Tableau Javascript API将会轻松得多。不使用API有好的理由吗？ - Talvalin

嗨，直到几天前，我无法让API工作，而且一直认为Tableau Server on-premise安装有问题。现在已经使一切正常，但现在正在努力将API脚本嵌入Confluence Wiki页面。 - Young Song

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Young Song · Accepted Answer

我想把我创建的代码作为参考张贴出来，以供其他人查看，如果他们遇到了与我一样的棘手情况。如我所提到的，我已经找到了访问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&#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>

重要提示：在选项值下，您需要插入到Tableau视图的链接（即“http：//”后跟tableau_server_name / path_to_view）。此外，当前状态下拉菜单并非完全可用...当第一个元素被选择时，尝试加载另一个视图时将无法正常工作...我正在努力解决这个问题。