この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
rickNo23です。
今回はjQueryのプラグインGoogleChartsを使って簡単にグラフを表示する方法を紹介します。
環境
jquery1.4.2
jgcharts.js.0.9.7
Download
ソース
< script type=”text/javascript” src=”http://search.kbmj.com/javascripts/jquery-1.4.2.min.js” >< /script >
< script tyep=”text/javascript” src=”http://rikiya.sakura.ne.jp/jQuery/jgcharts/jgcharts.js” >< /script >
< script language=”JavaScript” >< !–
jQuery(function(){
var api = new jGCharts.Api();
jQuery(‘< img >’).attr(‘src’, api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo(“#bar1”);
})
//– >< /script >
< div id=”bar1″ >< /div >
解説
まずはjqueryの読み込みでjquery-1.4.2.min.jsを参照
次にGoogleChartsの読み込みでjgcharts.jsを参照
var api = new jGCharts.Api();
で初期化
jQuery(‘< img >’).attr(‘src’, api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo(“#bar1”);
でデータを送信して画像を取得し、divのbar1へ出力しています。
オプション
本家を見てもらうと分かる通りグラフには様々な種類があります。
api.makeの中で
type : ??
とすることで別の種類のグラフに変わります。
例えばtype : ‘bhs’などにすると帯グラフに変化します。
また、画像サイズには制限がかけられておりmaximum size 300,000 pixelsとなっています。
サイズの変更は
size : ‘??x??’
で変更できます。
他にも様々なオプションがありますので、興味があったら本家を見てみてください。
