寝太郎の江戸風呂。ね！

[PR]

2024/04/16 (Tue.)

Google Visualization Events

Google Visualization には、各種のイベントが用意されています。そして、それぞれのイベントが起きたときにどのような動作をさせるかをユーザーが設定できます。例えば、テーブルをクリックした時に、そのクリックした行のデータをアラートで表示させるという動きを定められます。以下、イベント処理の設定方法とそれを使った簡単な例を紹介します。

イベント処理の設定方法

Google Visualization イベント処理の設定には、google.visualization.events.addListener を使用します。このメソッドは、３つの引数を取ります。第一引数はイベントが発生する visualization のオブジェクトです。第二引数はイベントの種類です。第三引数はイベント時に実行する関数です。例えば、Google Visualization Table によって生成された Table オブジェクトである table の select イベントに対して、selectHandler 関数を登録するには、次のように記述します。

google.visualization.events.addListener(
  table, 
  'select', 
  selectHandler
);

イベント情報の取得

イベントによって発生した情報を取得する方法には、２通りあります。1つは、特定のグローバルオブジェクトを参照する方法で、もう１つは、関数に渡されるイベント引数を参照する方法です。どちらで取得できるかは、イベントの種類で決まります。

select イベント

select イベントは、すべての Visualization にあるイベントです。Visualization の種類によって細かい点は異なりますが、おおむね次のような特性を持っています。

• 関数にプロパティやオブジェクトを渡すことはない。
• getSelection メソッドを利用して、選択されたデータに関する情報を取得する。

getSelection

getSelection メソッドは、選択されたデータに関する情報を持つオブジェクトの配列を返します。各オブジェクトは、row プロパティまたは column プロパティ、もしくはその両方を持ちます。どのプロパティが返るかは、Visualization の種類で決まります。Tableの場合には、row プロパティのみが返ります。各プロパティの値は、インデックス番号です。選択されたデータを取得するには、そのインデックス番号を用いて、DataTable の getValue メソッドなどを利用しなければなりません。

Table の select イベント処理例

Google Visualization Table で作成したテーブルのデータをクリックした場合に、その行の最初のカラムの値をアラート表示する関数の例を示します。

function selectHandler() {
 var str = data.getValue(table.getSelection()[0].row, 0);
 alert(str);
}

上記のコードにおいて、tableは Google Visualization Table オブジェクト、data は Google Visualization DataTable オブジェクトです。

サンプルページ

参考

2010/10/17 (Sun.) Trackback() Comment(0) Google Visualization