Tableau API JavaScript過濾器示例

Question

我正在嘗試Tableau提供的JavaScript API教程。 當我到達過濾器部分時，我有些失落，希望獲得一些指導。 我創建了一個小提琴，並將代碼縮減到最低限度：

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（）函數實際上沒有傳遞任何數據。 是因為我沒有將第一部分包裝在函數中嗎？

我的目標是在“美洲”區域設置過濾器按鈕過濾器。 感謝任何指導或建議。 這是我的小提琴

Answer 1

我遇到了類似的問題（對標記進行了過濾），並遇到了相同的錯誤。 我通過訪問activeSheet對象中的各個工作表並運行屬於每個工作表的clearSelectedMarksAsync函數來解決此問題。 您應該能夠以相同的方式運行applyFilterAsync。 希望能成功！

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

Answer 2

這是您正在嘗試執行的工作版本，將代碼塊另存為html文件，然后在您的Web瀏覽器中將其打開（僅在ie11中進行了測試）。

請注意，只有在占位符加載之后才能調用initializeViz函數。 另外，您還需要確保全局變量viz，workbook，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>

Tableau API JavaScript過濾器示例

問題描述

2 個解決方案

解決方案1
1 已采納 2014-10-17 14:28:04

解決方案2
1 2015-02-28 23:32:18

Tableau API JavaScript過濾器示例

問題描述

2 個解決方案

解決方案1 1 已采納 2014-10-17 14:28:04

解決方案2 1 2015-02-28 23:32:18

解決方案1
1 已采納 2014-10-17 14:28:04

解決方案2
1 2015-02-28 23:32:18