SQLの窓 イラストAC フリー素材

2014年07月05日

jQuery プラグイン : GoogleVisualization : PieChart : ループ処理を使ったテーブルと円グラフの作成


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/gv.js"></script>

<script type="text/javascript">
$(function(){

	$("#pie_chart_area")
	// テーブルオブジェクトを #pie_chart_area 内に作成
	.gvt()
	// 文字列を 0 番目として作成
	.gvt_addColumn('分類')
	// 数値列を 1 番目として作成
	.gvt_addNumColumn('データ');

	// 適当な円グラフ用のデータ
	testData = {
		"因果応報": 12543,
		"慇懃無礼": 326,
		"天真爛漫": 2890,
		"一期一会": 1112,
		"色即是空": 200,
		"満身創痍": 8891,
		"大器晩成": 6333
	};

	for( key in testData ) {
		$("#pie_chart_area")
		// 空の行を作成
		.gvt_addRow()
		// タイトル列の値をセット
		.gvt_setCell(0,key)
		// データ列の値をセット
		.gvt_setNumCell(1,testData[key]);
	}

	// 円グラフを描画
	$("#pie_chart_area").gvt_pie(600,400,'よく検索される四字熟語');

});

</script>
<div id="pie_chart_area"></div>
JS : Google Visualization : 円グラフ(Pie Chart) : 配列データを使ったテーブルと円グラフの作成 

リンク先は JavaSacript でこまめに書いたものですが、以下は jQuery で面倒な部分をプラグイン化して表示しています。

プラグインの gv.js は、Google ドライブにあります。
google.load('visualization', '1', { packages: ['table','piechart'] });

$.fn.extend({
    gvt: function() {
		$(this).data("DataTable", new google.visualization.DataTable());
		return this;
	},
	gvt_addColumn: function(title){
		$(this).data("DataTable").addColumn('string', title);
		return this;
	},
	gvt_addNumColumn: function(title){
		$(this).data("DataTable").addColumn('number', title);
		return this;
	},
	gvt_addRow: function(){
		$(this).data("CurRow", $(this).data("DataTable").addRow() );
		return this;
	},
	gvt_setCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
		return this;
	},
	gvt_setNumCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
		return this;
	},
	gvt_setRowCell: function(row, col, data){
		$(this).data("DataTable").setCell(row, col, data+"" );
		return this;
	},
	gvt_draw: function(width){
		var visualization = new google.visualization.Table($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			width: width+"px"
		});
		return this;
	},
	gvt_pie: function(width,height,title){
		var visualization = new google.visualization.PieChart($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			width: width,
			height: height,
			is3D: true,
			title: title,
			legend: 'right'
		});
		return this;
	}
});
もともとは、テーブル用なので、円グラフ用には最適化はされていません。


【jQueryの最新記事】
posted by at 2014-07-05 21:54 | jQuery | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX