« 小料理屋さんのWebサイト | トップページ | iPhoneのメニューアイコンのような glossy.js »

2008.07.21

canvas要素でデータからグラフ作成

多様なライブラリが用意されているHTML5.JP|Web Designing 2008年8月

8月号のWeb Designingの特集、「使い方はあなた次第!未来形Ajax」でも触れられていますが、HTML 5の草案の仕様として自由にグラフィックスを描画できるcanvasタグが組み込まれており、現段階でもIEを除くモダンブラウザでは、ほぼ対応しているようである。
また、canvasタグを利用したAjaxもすでに誕生しており、IE環境でもcanvasタグの機能をエミュレートするライブラリがいくつかあるので、使ってみようという試みであります。

今回は「Ajaxハジメマシタ」でも取り上げられている「HTML5.JP」というサイトからグラフに関する3種類のライブラリの紹介してみます。
どれも数値を入れるだけで簡単にキレイなグラフを描画してくれます。簡単なモノだったら、わざわざグラフィックソフトを使って作成しなくても充分じゃないでしょうか?(※ただし、IEではエミュレートの関係で表示が少し異なります)

百聞は一見に如かず、サンプルです。

↑このサンプルはこちらからダウンロードできます。

ソースコードを見てもらえば分かると思いますが、3種類ともグラフのデータはhtml内のJavaScriptに書き込み、canvasタグにidを付けて、divで囲んでいます。詳しい設定等はWeb Designing 8月号を見ていただくか、「HTML5.JP」に詳しく記述されています。
特に「HTML5.JP」にはいろいろなサンプルのダウンロードもできるので、一度訪れてみるコトをオススメします。

|

« 小料理屋さんのWebサイト | トップページ | iPhoneのメニューアイコンのような glossy.js »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/41925715

この記事へのトラックバック一覧です: canvas要素でデータからグラフ作成:

« 小料理屋さんのWebサイト | トップページ | iPhoneのメニューアイコンのような glossy.js »