通过 javascript API 保存和恢复 Tableau 图形的当前视图状态 [英] Saving and restoring current view state of a Tableau graph through javascript API
问题描述
问题:
如何通过 javascript-API 存储(然后检索)Tableau 视图的自定义状态?
How can I store - and then later retrieve - the custom state of a Tableau view through the javascript-API?
说明:
我正在开发一个网站，目前我们允许任何用户将一组 Tableau 视图协作成类似 PowerPoint 的在线演示文稿以供以后使用.在我们当前的实现中，不存储 Tableau 图形的状态，因此用户每次都必须在保持演示文稿的同时应用他或她所需的过滤器、选择工作表等.这是我们现在想要避免的.
I am working on a site where we currently allow any user to collaborate a set of Tableau views into a PowerPoint-like online presentation for later use. In our current implementation, the state of the Tableau graphs are not stored, and the user therefore has to apply his or hers desired filter, select worksheets etc. while holding the presentation - every time. This is what we now would like to avoid.
对此最简单的解决方案是存储和检索通过底部栏界面访问的共享"链接之一；这些链接包含当前视图的状态，但到目前为止，我们还无法做到这一点:首先，由于域问题，我们不能简单地从嵌入代码 iframe 中获取共享链接；其次，API 方法 workbook.getUrl() 似乎不包括当前视图的状态.
The easiest solution for this would be to store and retrieve one of the "Share"-links accessed through the bottom bar interface; these links contains the state of the current view, but so far, we have not been able to do this: firstly, due to domain issues, we cannot simply fetch the Share-links from the embed-code iframe; and secondly, the API-method workbook.getUrl() does not seem to include the state of the current view.
我目前正在研究 workbook.rememberCustomViewAsync(name) 和 workbook.showCustomViewAsync(name) 方法，这似乎是一个可能的解决方案.但是，我似乎无法从这两种方法中的任何一种中获得任何合理的结果，因为它们最终都会在运行时给出模糊的、无信息的 500 错误.
I am currenty looking into the workbook.rememberCustomViewAsync(name) and workbook.showCustomViewAsync(name) methods, which seem like a possible solution. However, I cannot seem to get any sensible results from either of these two methods, as they both end up giving obscure, non-informative 500 errors when run.
示例文件和错误:
为了更好地说明这个问题，我创建了一个最小的演示(下面的代码段)尝试使用上述第二种方法.在 Google Chrome 中打开时，两个按钮(保存状态"和检索状态")都不适合我，并且在开发人员工具(分别为 http 响应消息和开发人员控制台输出)中可以看到以下错误:
To better illustrate this issue, I have created a minimal demo (snippet below) that attempts to use the second method described above. When opened in Google Chrome, neither of the two buttons ('save state' and 'retrieve state') work for me, and the following errors can be seen in the Developer Tools (the http response message and developer console output, respectively):
Http 响应:
<br>
2015-11-11 16:14:17.916
(VkNpWQrCQaIAACQo2YYAAAPi,0,0)
控制台错误:
POST http://public.tableau.com/vizql/w/Book6_426/v/YRKE/save_customized_view/sessions/208A699D34E14708A2268AA10A827C99-0:0 500 (Internal Server Error)
有谁知道我如何解决这个问题，无论是通过使提供的代码示例工作(描述的第二种方法)，还是通过任何其他方式?任何帮助将不胜感激！
Does anyone know how I can solve this issue, either by making the provided code example work (the second method described), or through any other means? Any help would be appreciated!
PS:此处的代码段模拟器将导致 Access-Control-Allow-Origin 错误.该文件也已在此处发布.
PS: The snippet simulator here will cause a Access-Control-Allow-Origin error. The file has also been published here.
<html>
<head>
<title>A simple Tableau API demo</title>
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau_v8.js"></script-->
<script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js "></script>
</head>
<body>
<H2>Custom view storage demo</H2>
<button id="remember-button">
Remember state 'test'
</button>
<button id="retrieve-button">
Retrieve state 'test'
</button>
<div id="viz-placeholder" style="width: 1000px; height: 1000px; display: block;"></div>
<script>
// Render tableau graph
function initializeViz() {
var placeholderDiv = document.getElementById("viz-placeholder");
var url = "https://public.tableau.com/views/Book6_426/YRKE";
var options = {
width: placeholderDiv.offsetWidth,
height: placeholderDiv.offsetHeight,
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function() {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
viz = new tableau.Viz(placeholderDiv, url, options);
}
$(initializeViz)
// Assign and set up button actions for storing and retrieving the custom view
var customViewName = "test";
$('#remember-button').click(function() {
console.log("Remembering: ", customViewName);
// Try to save state, or print error
viz.getWorkbook().rememberCustomViewAsync(customViewName).otherwise(function(err) {
console.log("An error occured:");
console.log(err);
});
});
$('#retrieve-button').click(function() {
console.log("Retrieving: ", customViewName);
// Try to retrieve state, or print error
viz.getWorkbook().showCustomViewAsync(customViewName).otherwise(function(err) {
console.log("An error occured:");
console.log(err);
});
});
</script>
</body>
</html>推荐答案
好吧，所以我一直在与 Tableau 客户支持联系，他们似乎已经发现了问题.
Okey, so I have been in contact with Tableau Customer Support, and they seem to have found the issue.
显然，的某些元素javascript-API 仅适用于 Tableau Online 和 Tableau Server - 不适用于 Tableau Public.
Apparently, certain elements of the javascript-API is only available for Tableau Online and Tableau Server - not Tableau Public.
换句话说，Tableau Public 托管的图形不支持函数 workbook.rememberCustomViewAsync('customViewName') - 例如上面示例中使用的图形 (https://public.tableau.com/views/...).
In other words, the function workbook.rememberCustomViewAsync('customViewName') is not supported for graphs hosted by Tableau Public - such as the one used in the example above (https://public.tableau.com/views/...).
这篇关于通过 javascript API 保存和恢复 Tableau 图形的当前视图状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
