この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
車輪開発大好きおたいがです。こんにちは。ご無沙汰しております。( 挨拶 )
案件で Tableau JavaScript API を使用することになったので、実務を考慮した How To を段階的にまとめていきたいと思います。
Tableau JavaScript ライブラリの取得 ( 参照 )
現行のライブラリは下記から取得することができます。( 2015 年 7 月 13 日時点の最新 )
http://online.tableau.com/javascripts/api/tableau-2.0.0.min.js
http://public.tableau.com/javascripts/api/tableau-2.0.1.min.js
"Tableau" ビューの生成
まず、ビューの埋め込み対象となる DOM を用意します。
<div data-js="tableau-root" style="display: block;"></div>
ビュー対象となる DOM を jQuery で参照させてビューを生成します。( Tableau JavaScript API の Viz オブジェクトをインスタンス化することでビューが生成されます )
(function(){
/**
* Viz オブジェクト
* @property viz
* @type {Object}
*/
var viz;
/**
* WorkBook オブジェクト
* @property workbook
* @type {Object}
*/
var workbook;
/**
* アクティブな Sheet オブジェクト
* @property activeSheet
* @type {Object}
*/
var activeSheet;
/**
* Viz クラスの初期化処理
* @method initializeViz
*/
var initializeViz = function () {
var placeholderDiv = $('[data-js=tableau-root]')[0];
// Tableau public の場合
// http://public.tableau.com/views/≪workbookName≫/≪viewName≫
var url = 'http://public.tableau.com/views/cm-awsmembers-blogposts/sheet0';
var options = {
'width' : 800,
'height' : 640,
'hideTabs' : true,
'hideToolbar' : true,
'onFirstInteractive' : function () {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
viz = new tableau.Viz(placeholderDiv, url, options);
};
$(initializeViz);
}());
"Tableau" ビューの破棄
Viz オブジェクトインスタンスの dispose() メソッドをコールすることで、画面からビューが削除されます。
viz.dispose();
サンプル
Plnkr 上で Tableau JavaScript API を使用して、しんや氏が作成したビューを表示させてみました。
まとめ
Tableau JavaScript API を使用してビューの生成 / 破棄を制御することによって、複数のビュー表示切替を行儀よく処理することができます。仮に SPA のような Web アプリケーションであったとしても、安全に取り扱えそうです。