グラフを描画してくれる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://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

ダウンロードは、こちら。
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 test
		enhance({
			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

そしたら、閑歳さんがまた教えてくれました。

さっそくソーシャルインサイトのグラフを見てみたら、すごい綺麗だった。

クリックで拡大

その他のデモは、http://www.highcharts.com/demo/で見れます。

最近買ったjQuery Mobileの本。

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL) jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)
レビューを見る
欲しいものリストに追加
在庫なしpowered by Amazon.co.jp

以前買ってよかったjQueryの本。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL) Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
レビューを見る
欲しいものリストに追加
価格:3590円 在庫あり。powered by Amazon.co.jp

↓ プラグインを作る方々への本、書きました。 ↓

「グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト!」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です