Tableau API JavaScript 筛选器示例答案

【问题标题】：Tableau API JavaScript Filter ExampleTableau API JavaScript 筛选器示例
【发布时间】：2014-09-17 22:37:27
【问题描述】：

我正在尝试我在画面提供的JavaScript API Tutorial。当我到达过滤器部分时，我有点迷茫，希望得到一些指导。我创建了一个小提琴并将代码缩减到最低限度：

var placeholderDiv = document.getElementById("tableauViz");
var url = "http://public.tableausoftware.com/views/WorldIndicators/GDPpercapita";
var options = {
  hideTabs: true,
  hideToolbar: true,
  width: "800px",
  height: "400px",
  onFirstInteractive: function () {
    workbook = viz.getWorkbook();
    activeSheet = workbook.getActiveSheet();
  }

};
viz = new tableauSoftware.Viz(placeholderDiv, url, options);

function filterSingleValue() {
  activeSheet.applyFilterAsync(
    "Region",
    "The Americas",
    tableauSoftware.FilterUpdateType.REPLACE);
}

当我运行 consol 调试器时，我收到以下错误：

"Uncaught ReferenceError: filterSingleValue is not defined "

我不确定这意味着什么，但我猜测 filterSingleValue() 函数实际上并没有传递任何数据。是因为我没有将第一部分包装在函数中吗？

我的目标是让我的过滤器按钮过滤“美洲”地区。感谢任何指导或建议。这是我的fiddle

【问题讨论】：

你在哪里调用filterSingleValue。无论发生在哪里，都是在定义 filterSingleValue 函数之前。
jsfiddle.net/6wjv502o/1 我让它在不使用 onclick 的情况下工作，而是使用手动侦听器。我觉得我太累了，看不到明显的错误。
stackoverflow.com/questions/20205091/… 也许只是不好用。我从来没有做过，但不知道有问题。无论哪种方式，您的 Tableau JS 看起来都不错。
感谢 Leeish，指向其他 stackoverflow 文章的有趣链接。我浏览了其他一些文章，偶然发现了this 文章，进一步解释了在 html 和 js 中调用函数的区别。很有帮助。干杯。

标签： javascript tableau-api

【解决方案1】：

我遇到了类似的问题（对标记进行过滤）并且遇到了同样的错误。我通过访问 activeSheet 对象中的各个工作表并运行属于每个工作表的 clearSelectedMarksAsync 函数来解决它。您应该能够以相同的方式运行 applyFilterAsync。希望有效！

filterReset = function() {
     activeSheet.getWorksheets()[0].applyFilterAsync("Region", "The Americas", tableauSoftware.FilterUpdateType.REPLACE);
   }

【讨论】：

【解决方案2】：

这是您尝试做的工作版本，将代码块保存为 html 文件并在您的网络浏览器中打开它（仅在 ie11 中测试）。

请注意，在加载占位符之前，您不能调用 initializeViz 函数。您还需要确保您的全局变量，即工作簿、activeSheet 是全局的。 (http://onlinehelp.tableau.com/samples/en-us/js_api/tutorial.js)

<html>
<head>
<meta charset="utf-8">
<title>Tableau 8 Javascrip API</title>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
<script type="text/javascript">
/////////////////////
// Global variables
var viz, workbook, activeSheet

// Change the region filter
function filterSingleValue(regionFilter) {
  activeSheet.applyFilterAsync(
    "Region",
    regionFilter.value,
    tableauSoftware.FilterUpdateType.REPLACE);
} 

// Initialise the viz to hold the workbook
function initializeViz(){
    //Get the region filter to be able to apply the filter on the initialisation of the viz
    var regionFilter = document.getElementById("regionFilter"); 
    var placeholderDiv = document.getElementById("tableauViz"); 
    var url = "http://public.tableausoftware.com/views/WorldIndicators/GDPpercapita?Region=" + regionFilter.options[regionFilter.selectedIndex].text; 
    var options = {
        width: "800px", //width: placeholderDiv.offsetWidth,
        height: "400px", //height: placeholderDiv.offsetHeight,
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function () {
            workbook = viz.getWorkbook();
            activeSheet = workbook.getActiveSheet();
        }
    };
    viz = new tableauSoftware.Viz(placeholderDiv, url, options);    
}
</script>
</head>
<body>
<!-- Dropdown Menu, the value corresponds with those found in the "region" filter -->
    <select id="regionFilter" onchange="filterSingleValue(this)">
        <option value="Europe">Europe</option>
        <option value="Middle East">Middle East</option>
        <option value="The Americas">The Americas</option>
        <option value="Oceania" selected="selected">Oceania</option>
        <option value="Asia">Asia</option>
        <option value="Africa">Africa</option>
    </select>
<!-- Tableau view goes here -->
    <div id="tableauViz" style="height:1200px; width:1200px"\></div>
    <script type='text/javascript'>
    //Initialize the viz after the div is created
    initializeViz();
    </script>
</body>
</html>

【讨论】：