スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Web] HTML5でFlashを使わずにグラフを描いてみよう( canvas, jQuery + jqPlot )

以前にグラフを使うところで、amCharts というものをご紹介したかと思います。
[Web] Flash で綺麗なグラフを表示できる amCharts がなんか使い勝手よさげ

実際に使うとこんな↓感じです。
[政治] 発足から1年間の内閣支持率の推移をグラフにしてみた

amCharts を使ったグラフ


で、私自身、Webでこういうグラフィカルなグラフを動的に作るとするなら
こういう Flash を使った形で、データをXMLなりCSVテキストなりで渡してやる形で
ウッドボール(きまり)だろうと思っていたのです。

が、ご存じのとおり iPhone/iPad が、Webにアクセスする端末として
無視できなくなってきた以上、Flash でいいじゃん! こち亀でいいじゃん!
とばかりも言ってられなくなってきました。

こちら葛飾区亀有公園前派出所 DVD-BOXこちら葛飾区亀有公園前派出所 DVD-BOX
(2010/02/10)
香取慎吾香里奈

商品詳細を見る


Webでグラフを使う際に、じゃあ Flash を使いましょう、と言っても、
「でも iPhone で Flash は見られないよね?」と言われてしまうとグゥの音もでません。
見なきゃいいじゃん! って言いたいです。言えないですけど。
見なきゃいいじゃん! ここで言っておきます。

というわけで、Apple さんは Flash を避けて HTML5 の方へ行こうと
してらっしゃるので、しばらくはその路線におつきあいするのもありでしょう。
HTML5 では、canvas というタグが追加され、これは目玉のひとつです。
この canvas タグに Javascript から動作を指定してやることで、
描画を行うことができます。

さまざまな図形を描く - Canvas - HTML5.JP
http://www.html5.jp/canvas/how2.html

シンプルにやってみた場合(画像クリックで別画面を開きます)
HTML5 canvas でグラフを描画

四角(矩形)を描く命令や、円弧を描く命令は標準でありますので、
これらを駆使することで、グラフ(らしきもの)を描くことができます。
ただ、円グラフに関しては、パイ型の円弧を描くことができないので、
少し工夫が必要でしょう。そして、よりビジュアルに見せようとするなら、
もっと工夫が必要でしょう。それは非常に面倒。

というわけで、jQuery を使って楽をしましょう。
それから、グラフ描画について自分で作りこんでもいいのですが、
どうせ楽をするならグラフ描画についても jQuery のプラグインを使って
しまいましょう。いろいろ公開されているようですが、Google先生に聞いてみて
おすすめ(トップ表示)だった jqPlot を今回使いました。

ASCII.jp:jQueryで見栄えのいいグラフが描ける「jqPlot」

http://ascii.jp/elem/000/000/432/432221/

jQuery + jqPlot を利用した場合(画像クリックで別画面を開きます)
HTML5 canvas でグラフを描画

それぞれソースを見ていただけるので、確認してもらえればいいのですが、
やはり jQuery + プラグインを使うのが実にシンプルです。
自分の(自社の)なかで使いよいようにしたい、というのであれば、
プラグインを自作するのもよいでしょう。

jQuery でグラフ作成 - [Javascript] All About
http://allabout.co.jp/gm/gc/24175/

プラグインを自作する話は横道なのですが、
先の jqPlot などを使うと、指定するのはグラフ表示のデータと
オプションパラメータだけなので、特にプログラムスキルがなくとも、
英語のリファレンスを読む気合さえあればデザイナーさんでもプログラミング
することなくグラフィカルで、iPhone/iPad でも見ることのできるグラフをつくることができます。

そういう案件があればご検討いただきたく。

そのほか、グラフのプラグインはいろいろあるようですよ。

6 jQuery Chart Plugins For Your App
http://www.reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/

ひと昔前はブラウザとの互換性がとか、デバッグが面倒とか毛嫌いされていた
Javascript ですけど、jQuery など使いやすいライブラリがポピュラーになってから、
俄然 Web 技術の主役になってきた感がありますね。



jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリjQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ
(2009/04)
相澤 裕介

商品詳細を見る

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
(2010/02/12)
西畑 一馬

商品詳細を見る
関連記事
スポンサーサイト

テーマ : web制作
ジャンル : コンピュータ

タグ : jQuery

comment

管理者にだけメッセージを送る

検索フォーム
リンク
最新記事
最新コメント
カテゴリ
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。