2016年11月19日


Google Visualization API の円グラフと通常テーブルの表示を jQuery のプラグインで作成する

Google Visualization を扱う時に基本部分となる円グラフの表示です。その表示の為に DataTable オブジェクトを作成しますが、それを単純に表示する為にテーブル表示部分(google.visualization.Table)も実装しています

※ ライブラリのロードは {'packages':['corechart','table']} です

Google の ドキュメント内の『オプション一覧』

Google のドキュメントの 『円グラフのクイック・スタート』

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}

.myHeader {
	color:#ffffff;
	background: #123456;
	padding: 12px!important
	border: solid #303030 1px;
}
.myCell {
	padding: 12px!important;
	border: solid #303030 1px!important;
}
</style>

<script>
var testData = 
[
	12543,
	326,
	2890,
	1112,
	200,
	8891,
	6333
];

// *********************************************
// jQuery を使用して画面上の
// コンテンツがロードされてから
// google.visualization をロード
// *********************************************
$(function(){
	google.charts.load('current', {'packages':['corechart','table']});
	google.charts.setOnLoadCallback(function(){
		// *********************************************
		// jQuery によるプラグイン化
		// *********************************************
		$.fn.extend({
			gv_getData: function() {
				return $(this).data("DataTable");
			},
			gv_setData: function() {
				if (arguments.length == 1) {
					// 引数がある場合は引数の DataTable をセットする
					$(this).data("DataTable",arguments[0]);
				}
				else {
					// 引数が無い場合は初期化した DataTable をセットする
					$(this).data("DataTable", new google.visualization.DataTable());
				}
				return this;
			},
			gv_addColumn: function(title){
				$(this).data("DataTable").addColumn('string', title);
				return this;
			},
			gv_addNumColumn: function(title){
				$(this).data("DataTable").addColumn('number', title);
				return this;
			},
			gv_addRow: function(){
				$(this).data("CurRow", $(this).data("DataTable").addRow() );
				return this;
			},
			gv_setCell: function(col, data){
				$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
				return this;
			},
			gv_setNumCell: function(col, data){
				$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
				return this;
			},
			gv_setRowCell: function(row, col, data){
				$(this).data("DataTable").setCell(row, col, data+"" );
				return this;
			},
			gv_setRowNumCell: function(row, col, data){
				$(this).data("DataTable").setCell(row, col, data );
				return this;
			},
			gv_table: function(options){
				var visualization = new google.visualization.Table($(this).get(0));
				visualization.draw($(this).data("DataTable"), options);
				return this;
			},
			gv_pie: function(options){
				var visualization = new google.visualization.PieChart($(this).get(0));
				visualization.draw($(this).data("DataTable"), options);
				return this;
			}
		});

	
		// *********************************************
		// 初期の実行
		// *********************************************
		drawPieChart()
	});
});

// *********************************************
// visualization のロード完了時に実行
// *********************************************
function drawPieChart() {

	var pie_chart 	= $("#pie_chart_area");
	var table_area = $("#table_area");

	// ***************************************
	// 円グラフ作成
	// ***************************************
	pie_chart 
		.gv_setData()						// DataTable の初期化
		.gv_addColumn('分類')				// 列追加
		.gv_addNumColumn('データ');		// 列追加

	// ***************************************
	// 円グラフ内に DataTable を作成
	// ***************************************
	for( var i = 0; i < testData.length; i++ ) {
		pie_chart 
			.gv_addRow()				// 行追加
			.gv_setCell(0,"分類"+(i+1))		// カラムデータセット
			.gv_setNumCell(1,testData[i]);	// カラムデータセット
	}

	// ***************************************
	// 円グラフ描画
	// ***************************************
	pie_chart.gv_pie({
		width: 500,
		height: 400,
		is3D: true,
		title: '円グラフの表示',
		legend: 'right'
	});

	// ***************************************
	// pie_chart で作成した DataTable
	//  を使ってテーブルを表示する
	// ***************************************
	table_area
		.gv_setData(pie_chart.gv_getData())		// データのセット
		.gv_table({
			width: 300,
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			showRowNumber: true
		});

}

</script>
<div id="pie_chart_area"></div>
<div id="table_area"></div>



▼ デモ



posted by at 2016-11-19 18:23 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します