| |
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>Google Visualization : Table : 固定データを使ったテーブルの作成</title>
<style type="text/css">
* {
font-family: "ＭＳ Ｐゴシック";
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>
| |
