2024
04
19
2010
09
01
Google Visualization Table を利用して簡単にテーブルを作成する。
dataTable
「Google Ajax API 動的ロード」では、Google Ajax API を動的にロードする方法があることを紹介しました。今回は、その具体的な例として、「visualization」パッケージを動的にロードして利用するツールの一例を示します。題材にしたのは、ページにテーブルを作成する「Google Visualization : Table」です。
皆さんは、WEBページにテーブルを作成するとき、面倒だと思ったことはありませんか?簡単なテーブルであっても、TABLE要素を記述して、TR要素を各行ごとに記述して、さらにセルの数だけ、TD要素を入れなければなりません。サンプルページ「dataTable.html」のテーブルは、そういうことはしていません。テーブルを挿入したい場所に次の記述をしているだけです。
<script
src="http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1283339276"
title=
"string:name;number:age;boolean:true|Nancy;36;false|Alice;17;false|Cozy;28;true">
</script>
データ部分は、SCRIPT要素のtotle属性に記述しています。このtitle属性を読み取って、Google Visualization の dataTable に放り込むことによって、テーブルを作成しています。データの各行は、パイプ「|」で区切っています。そして、各セルはセミコロン「;」で区分しています。一行目だけは特殊で、カラムのデータタイプとラベルをコロン「:」で関連つけています。
「http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1283339276」のソースコードを読めば、前回説明したような形で動的ロードを利用していることが分かります。今回は、その処理内容については、詳しく説明しませんが、動的ロードが非常に便利なものらしいことは、わかるかと思います。
PR
2010/09/01 (Wed.) Trackback() Comment(0) Google Visualization
Comments
Trackback
Trackback for this entry：
