グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！
グラフを描画してくれるjQueryプラグインを紹介します。
グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。
が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。
他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。
作れるグラフの種類
グラフは以下のものを使うことができます。
- 棒グラフ
- 線グラフ
- 線グラフで線の下を薄く塗れるやつ
- 円グラフ
デザインは二種類
冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。
また、背景画像やcssを自分で変更すれば、カスタマイズも簡単そうです。
便利なところ
- IE6から対応
- テーブルを作ると、そのテーブルを元に表を描いてくれる
- 設定が簡単
- 線の色を変えられる
- 線グラフのY軸の範囲を指定できる
- 線グラフで途中の値に抜けがあっても大丈夫
IE対応
このプラグインでは、html5のcanvas要素を利用してグラフを描いているのですが、同梱されているEnhanceJSというライブラリ（元はGoogleが提供しているライブラリをちょっと変えたものらしい）が、IEへの翻訳をしてくれます。
テーブルから作ってくれることの利点
Google Chartでは、http://chart.apis.google.com/chart?chs=300x300&chd=t:10,15,4,60,45|30,23,73,24,87&cht=lc&chco=ff0000,0000ffのように、URLの中に値を書きこんで渡す必要があります。
シンプルですが、作っている時に(x, y)の対応が分かりづらいです。jQuery Visualizeでは、まずテーブルを作りそのテーブルを元にグラフが作られるので便利です。
↑上のテーブルを作れば、下の図が出来る。
設定が簡単
jQueryとプラグインファイルを読み込んだあと、書きのように設定を行います。
jQuery(function(){jQuery('.hentry table').visualize({type: 'line', width: '700px', height: '500px', colors: ['#666699', '#be1e2d', '#92d5ea'], topValue: 70.0, bottomValue: 45.0});});この例では、グラフの種類を線グラフに、グラフの幅を700px,高さを500pxに、線の色を上から順に配列で指定、y軸の範囲を45から70に指定しています。
線グラフのY軸の範囲を指定する
これができるものが少ないです。Google Chartではやりかたがわかりませんでした（有りそうな気もしてる）。
普通に指定すると、Yが0から始まってしまいます。
この、上端と下端を指定するためには、js/visualize.jQuery.jsを少し書き換える必要があります。
topValueとbottomValueを定義しているところをコメントアウトして、下記と入れ替えます。
有志の方が、拡張してくれた機能です。(Add option(s) to customize the range of values that appear on each axis – Google Project Hosting)
topValue: function(){if (o.topValue===false) {var topValue = 0;var allData = this.allData().join(',').split(',');$(allData).each(function(){if(parseFloat(this,10)>topValue) topValue = parseFloat(this);});return topValue;}else {return o.topValue;}},bottomValue: function(){if (o.bottomValue===false) {var bottomValue = 0;var allData = this.allData().join(',').split(',');$(allData).each(function(){if(this<bottomValue) bottomValue = parseFloat(this);});return bottomValue;}else {return o.bottomValue;}},すると下のようになります。
線グラフで途中の値に抜けがあっても大丈夫
たとえば、毎日の体重を記録していくとして、1日、2日、3日はちゃんと記録してたけど、4日は忘れてしまって、5日からまたつけ始めた場合、Google Chartだと、4日の体重を空欄にしておくと、3日から5日の間には何も描画されません。
線が途中でブツッと切れます。
このプラグインでは、3日と5日の値を直線で結んでくれます。
使い方
ダウンロードは、こちら。
http://dwpe.googlecode.com/files/dwpe-code-public-latest.zip
ダウンロードしたファイルを設置したあと、下記のようにheadに書き込みます。
<link href="css/basic.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="../_shared/EnhanceJS/enhance.js"></script><script type="text/javascript">// Run capabilities testenhance({loadScripts: ['js/excanvas.js','../_shared/jquery.min.js','js/visualize.jQuery.js','js/example.js'],loadStyles: ['css/visualize.css','css/visualize-light.css']}); </script>細かい設定は、js/example.jsの中で指定します。
見た目は、css/visualize-light.cssで設定できます。
WordPressで使う場合
テーマフォルダの中に、ダウンロードしてきたファイルを入れ、下記のように指定します。
（ちょっとディレクトリ構成を変えていますので、適宜調整を。。）
if ( is_page_template('graph.php') ) {wp_enqueue_style('chartbasestyle', get_bloginfo('template_url') . '/charting/css/basic.css');wp_enqueue_script('enhance', get_bloginfo('template_url') . '/charting/shared/EnhanceJS/enhance.js');$template_url_for_chart = get_bloginfo('template_url');$other_files_to_load = "<script type=\"text/javascript\">enhance({loadScripts: ['{$template_url_for_chart}/charting/js/excanvas.js','{$template_url_for_chart}/charting/js/visualize.jQuery.js','{$template_url_for_chart}/charting/js/example.js'],loadStyles: ['{$template_url_for_chart}/charting/css/visualize.css','{$template_url_for_chart}/charting/css/visualize-light.css']}); </script>";echo $other_files_to_load;}ここでは、graph.phpというページのテンプレートを利用している時だけ、各種ファイルを読み込むように設定しています。
アイディア
どんなことができそうか。。
僕の場合、子供の身長と体重の遷移を記録し、標準の成長曲線と合わせて表示することを考えています。
この他にも、体重を毎日記録するレコーディング・ダイエットアプリを作ったりできると思います。
また、表組みでしか提供されていない官公庁などのデータも、そのテーブルを読み込んでグラフにする、というのを簡単にやってくれるので、そういうサービスも作ることができるように思います。
他にもアイディアがあったら、教えて下さい！
追記：2011/10/17
色々カスタムしたら、こんな感じになったよ。
追記：2012/05/17
半年以上前の記事ですが、昨日からなぜかviewがすごく増えた。はてなブックマークのコメントで、 @kansai_takako さんがコメントしてくれていたのがこちら。
jQuery が必須じゃないなら Highcharts が最強
Highchartsは知らなかったですが、http://www.highcharts.com/のことだと思います。ご参考まで。
もう一回追記：2012/05/17
そしたら、閑歳さんがまた教えてくれました。
@shinichiN Highcharts はソーシャルインサイトで採用しているのですが、ものすごく柔軟で、デザインも思い通りにキレイに仕上がります。ご参考まで〜admin.social.userlocal.jp
— 閑歳 孝子さん (@kansai_takako)5月 17, 2012
さっそくソーシャルインサイトのグラフを見てみたら、すごい綺麗だった。
クリックで拡大
その他のデモは、http://www.highcharts.com/demo/で見れます。
最近買ったjQuery Mobileの本。
以前買ってよかったjQueryの本。
この記事が気に入ったら
フォローしてね！
