JS : Google Visualization : Table : 固定データ(オブジェクト、JSON)を使ったテーブルの作成

  固定データでテーブル作成する場合の内部詳細と Visualization Table に対する CSS の適用



テーブルが二つありますが、どちらもデータは同じで後者のみ CSS を適用しています
ボタンで表示されるのは、固定データでセットしたテーブルプロパティの参照です。

※ セットできるオプションについては、Visualization: Table - Google Visualization API - Google Code の
※ Configuration Options を参照して下さい

※ 固定データを使う場合は、カンマやちよっとしたタイプミスで表示されなくなるので、
※ メソッドを使ったほうが確実ですが、場合によっては便利な時もあります。

テーブル用データ作成の引数にオブジェクトでは無く、JSON 文字列を使用できるので、
http 通信で、サイトからデータのみ取得して使用する事ができます

var myJSON = 'JSON 文字列';
data = new google.visualization.DataTable(myJSON);

※ JSON 文字列は既に表示されているオブジェクトから、data.toJSON() で取得する事もできます
( その場合、日本語が \u793e\u54e1\u30b3\u30fc\u30c9 のような unicode 表現に変換されてます )







prototype.js を使用すると、既存のオブジェクトを容易に JSON 文字列として取得できます

Object.toJSON( myData ); // myData の JSON 文字列が返る

逆は、文字列オブジェクトに対して、常に evalJSON() メソッドが使用可能です
Prototype JavaScript framework: Introduction to JSON




  ソースコード



  
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>Google Visualization : Table : 固定データを使ったテーブルの作成</title>
<style type="text/css">
* {
	font-family: "MS Pゴシック";
	font-size: 12px;
}

/* ヘッダとデータの クラス */
.myVtd,.myVhtd {
	padding: 7px!important;
	border-style: solid;
	border-color: #A0A0A0;
	border-width: 1px;
}

</style>

<!--
  Google API の基本部分
  まずこれがロードされないと、google. のメソッドが動作できない
-->
<script	type="text/javascript"
	src="http://www.google.com/jsapi"
	charset="utf-8"
></script>


<!--
  Google API のパーツ部分
  一つのScriptセクションで実行する事
  でないと同一セクションではロードされる前の記述となります
-->
<script type="text/javascript">
// ここでは使っていませんが、prototype.js を適用
google.load("prototype", "1.6.1.0");
// バージョン1の、table パッケージを使用
google.load('visualization', '1', { packages: ['table'] });
</script>


<!--
  Google API のユーザ部分
-->
<script type="text/javascript">
google.setOnLoadCallback(createMyTable);

var data;
var visualization_b,visualization;

// *********************************************************
// テーブルの作成
// ( setOnLoadCallback で、onload イベントに追加されます )
// *********************************************************
function createMyTable() {

	var myData = {
	   // カラム定義
	   // id: カラムID / label: タイトル文字列 / type: データ型
	   // myData.cols[n].id,myData.cols[n].label,myData.cols[n].type
	   cols: [
	      {id: 'COL_1', label: '社員コード', type: 'string'},
	      {id: 'COL_2', label: '氏名', type: 'string'},
	      {id: 'COL_3', label: '給与', type: 'number'}
	   ],
	   // 行データ
	   rows: [
	      // 1行目
	      {
	         c:[
	            {v: '0001'},
	            {v: '浦岡 友也'},
	            // v: 値 / f: フォーマットされた文字列
	            {v: 270000, f: '270,000'}
	         ]
	      },
	      // 2行目
	      {
	         c:[
	            {v: '0002'},
	            {v: '山村 洋代'},
	            {v: 300000, f: '300,000'}
	         ]
	      },
	      // 3行目
	      { 
	         c:[
	            {v: '0003'},
	            {v: '多岡 冬行'},
	            {v: 250000, f: '250,000'}
	         ]
	      }
	   ],
	   // テーブルのプロパティ
	   p:
	      {
	         att1: '社員マスタ',
	         att2: 'プログラムが作成したデータ'
	      }
	}

	// テーブル用データ作成
	data = new google.visualization.DataTable(myData);

	// CSS 無しテーブル作成
	visualization_b = 
		new google.visualization.Table(
			document.getElementById('table_area_before')
		);
	// CSS 無しテーブルにデータを適用
	visualization_b.draw(data);


	// CSS ありテーブル作成
	visualization = 
		new google.visualization.Table(
			document.getElementById('table_area')
		);

	// CSS ありテーブルにデータとオプションを適用
	visualization.draw(data,
		{
			// ヘッダとデータの TD にクラス名を指定指定
			cssClassNames: {
				tableCell: 'myVtd',
				headerCell: 'myVhtd'
			},
			width: '550px'
		}
	);

}
</script> 
</head>

<body>

<div id="table_area_before"></div>
<br><br>
<div id="table_area"></div>
<br><br>

<input type=button value="テーブルプロパティ" onClick='
	alert(
		data.getTableProperty("att1")+
		" / "+
		data.getTableProperty("att2")
	);
'>

</body>
</html>
  


Google の API ドキュメント
Google Visualization API Reference













  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ