[Tableau] JavaScript API マークの設定

車輪開発大好きおたいがです。こんにちは。( 挨拶 )

前回紹介したフィルターの設定方法に引き続き、Tableau JavaScript API の How To を掘り下げていきます。今回は Tableau ワークブックシートのマーク情報の取得および設定方法を紹介します。基本的にマークの取り扱い方法はフィルターとほぼ同じなので、フィルターの取り扱い方さえ分れば簡単に覚えることができるはずです。

マーク情報の取得

マーク情報はワークシートから取得することができます。worksheet.getSelectedMarksAsync() メソッドを使用することで、Promise オブジェクトを介して Mark インスタンスの配列が取得可能です。

var options = {
    …
    'onFirstInteractive' : function () {
        workbook      = viz.getWorkbook();
        activeSheet   = workbook.getActiveSheet();
        var onSuccess = function(marks) {
            $.each(marks, function(i, mark) {
                var pairs = mark.getPairs();
                $.each(pairs, function(j, pair) {
                    //TODO:
                });
            });
        };
        var onFault = function(error) {
            //TODO:
        };
        activeSheet
            .getSelectedMarksAsync()
            .then(onSuccess, onFault);
    }
};
viz = new tableau.Viz(placeholderDiv, url, options);

上記のように、アクティブなワークシートからマーク情報を取得することができます。

マーク情報の設定

WorkSheet クラスの設定メソッド

マーク情報の取得と同様、アクティブなワークシートを起点とした worksheet.selectMarksAsync() メソッドが用意されています。ここで覚えておくと良いポイントですが、worksheet.selectMarksAsync() メソッドはオーバーロードに対応しているため、用途に応じて使い分けができます。

メッソド名	戻り値
workSheet.selectMarksAsync(fieldName: string, value: object or object[], updateType: SelectionUpdateType)	void
workSheet.selectMarksAsync(fieldValuesMap: object, updateType: SelectionUpdateType)	void
workSheet.selectMarksAsync(marks: Mark[], updateType: SelectionUpdateType)	void

selectMarksAsync というメソッド名なのに、戻り値が void なのが少々気になります…

選択中マーク情報のリセット

マーク情報をリセットするときには workSheet.clearSelectedMarksAsync() メソッドを使用します。

• workSheet.clearSelectedMarksAsync()

サンプル

しんや氏サンプルを拝借して『「名前」行から "しんや", "せーの"、「月(投稿年月)」列から "2015年1月" に該当するセルをマークする』 サンプルを作成してみました。

まとめ

Tableau JavaScript API におけるマークの取り扱いについて触れてみました。フィルター同様、作成したワークシートの任意の箇所を強調して見せたいとき、または外部から動的にハイライトさせたいときに役立つのではないかと考えています。