イベント処理
ビジュアライゼーションは、Webページの他の部分と情報を交換できなければなりません。こうした機能は、共通のデータに基づく複数のビジュアライゼーションを同じWebページ上で用いるようなダッシュボードを作成する場合に特に重要です。各ビジュアライゼーションは、Webページ上のどこか別の場所、あるいは他のビジュアライゼーションで起こった変化に反応する必要があるからです。
こうしたケースに対応するため、Google Visualization APIにはイベントの起動と応答に関する関数が用意されています。ビジュアライゼーションは、google.visualization.events.trigger()関数を使ってイベントを発生させることができます。この関数は次の3つのパラメータを取ります。
- イベントのソース（通常はビジュアライゼーション自身）
- イベントの名前を表す文字列
- イベントの詳細情報を表すオブジェクト（キーと値のペアで表現）
ビジュアライゼーションの利用者は、google.visualization.events.addListener()関数を使ってイベントを監視できます。この関数も次の3つのパラメータを取ります。
- 監視の対象となるビジュアライゼーション
- 関心のあるイベントの名前
- イベントを処理するコールバック関数（イベントの詳細情報はパラメータとしてこの関数に渡される）
selectイベント
特殊なケースとしてselectイベントがあります。ビジュアライゼーションは、このイベントを使って、基になるDataTableの特定の要素がユーザーによって選択されたことを他のビジュアライゼーションに通知し、その選択操作に対して反応するように指示します。selectイベントを処理するビジュアライゼーションでは、次のことを行う必要があります。
DataTableの特定のセル、行、列に対応するアイテムがユーザーによって選択された際の（select名を持ち、詳細情報を持たない）イベントの起動。- 選択されているアイテムの配列を返す
getSelection()メソッドの公開。選択されたアイテムは、データ内の選択対象セルを参照するrowまたはcolumnプロパティ（あるいはその両方）を持つオブジェクトでなければなりません。行全体または列全体が選択された場合、rowプロパティやcolumnプロパティはnullのままで構いません。 - 当該ビジュアライゼーションの外側で発生した選択に反応する場合は
setSelection()メソッドの公開。このメソッドはオブジェクトのリストを受け取り、その形式はgetSelection()が返すものと同じです。
リスト5は、先ほどのツリーマップビジュアライゼーションを拡張して、selectイベントを発生させるようにしたものです。
ns.TreeMap = function(container) {
this.container = container;
this.selectedRow = null;
};
ns.TreeMap.prototype.getSelection = function() {
return [{row: this.selectedRow}];
}
ns.TreeMap.prototype.draw = function(data, options) {
// ... omissis ...
// js-treemap fires onBoxClick whenever a user clicks on
// particular node in the treemap.
// The handler identifies the corresponding row in the
// DataTable and fires a select event.
map.onBoxClick = function() {
var name = map.getSelected().node.name;
for (var i=0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 0) == name) {
self.selectedRow = i;
google.visualization.events.trigger(self, 'select', {});
break;
}
}
};
};
また、次のコードをサンプルWebページに追加することで、ツリーマップと組織図を連動させることができます。
google.visualization.events.addListener(
treemap, 'select', function() {
orgchart.setSelection(treemap.getSelection());
});
これにより、ツリーマップのノードをクリックすると、組織図の該当するエントリが強調表示されるようになります。
