忍者ブログ

2018
05
21

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/05/21 (Mon.)

2010
10
17

Google Visualization Events


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

イベント処理の設定方法

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

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

イベント情報の取得

イベントによって発生した情報を取得する方法には、2通りあります。1つは、特定のグローバルオブジェクトを参照する方法で、もう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 オブジェクトです。

http://file.netarrows.edoblog.net/gV_events.html

サンプルページ

Google Visualization events の利用例

参考

Handling Events - Google Visualization
PR

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

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

04 2018/05 06
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア