忍者ブログ

2018
05
21

[PR]

×

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

2018/05/21 (Mon.)

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://file.netarrows.edoblog.net/dataTable.js"
title=
"string:name;number:age;boolean:true|Nancy;36;false|Alice;17;false|Cozy;28;true">
</script>

データ部分は、SCRIPT要素のtotle属性に記述しています。このtitle属性を読み取って、Google Visualization の dataTable に放り込むことによって、テーブルを作成しています。データの各行は、パイプ「|」で区切っています。そして、各セルはセミコロン「;」で区分しています。一行目だけは特殊で、カラムのデータタイプとラベルをコロン「:」で関連つけています。

http://file.netarrows.edoblog.net/dataTable.js」のソースコードを読めば、前回説明したような形で動的ロードを利用していることが分かります。今回は、その処理内容については、詳しく説明しませんが、動的ロードが非常に便利なものらしいことは、わかるかと思います。

PR

2010/09/01 (Wed.) 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

コガネモチ

フリーエリア