Tableの使用方法
出力はHTMLのtable要素で行われます。それはたとえば次のような形式です。
<table cellspacing="0" class="google-visualization-table-table" style="width: 335px;">
<tr class="google-visualization-table-tr-head">
<td class="google-visualization-table-th google-visualization-table-sorthdr">都道府県<span class="google-visualization-table-sortind"> </span></td>
<td class="google-visualization-table-th google-visualization-table-sorthdr">人口<span class="google-visualization-table-sortind">▼</span></td>
</tr>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">Hokkaido</td>
<td class="google-visualization-table-td google-visualization-table-td-number">554</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">Miyagi</td>
<td class="google-visualization-table-td google-visualization-table-td-number">234</td>
</tr>
</table>
表示設定
draw()メソッドの引数で、テーブルの表示をカスタマイズできます。
分類 |
プロパティ名 |
データ型 |
解説 |
既定値 |
|
allowHtml |
boolean |
'true'のとき、HTMLタグをHTMLとして処理する。 |
false |
行 |
firstRowNumber |
number |
データテーブルの最初の行番号。 |
1 |
showRowNumber |
boolean |
'true'のとき、行番号を表示する。 |
false |
ページ |
page |
string |
ページ処理の方法。
- 'enable' … ページボタンを表示し、クリックでページを操作する。
- 'event' … ページボタンを表示し、クリックでイベントを発生する。
- 'disable' … ページ処理を無効とする。
|
'disable' |
pageSize |
number |
1ページに表示する行数。(ページ処理が有効のときのみ機能する) |
10 |
startPage |
number |
最初に表示するページ番号。 |
0 |
ソート |
sort |
string |
ソート処理の方法。
- 'enable' … ヘッダをクリック時に、ソートを実行する。
- 'event' … ヘッダをクリック時に、イベントを発生する。
- 'disable' … ソートを無効とする。
|
'enable' |
sortAscending |
boolean |
'true'のとき、昇順でソートする。 |
true |
sortColumn |
number |
最初にソートしておく列の番号。 |
-1 |
サイズ |
width |
string |
テーブルの幅。表示に必要な大きさに足りない場合は、スクロールバーが追加される。 |
'automatic' |
height |
string |
テーブルの高さ。表示に必要な大きさに足りない場合は、スクロールバーが追加される。 |
'automatic' |
scrollLeftStartPosition |
number |
水平スクロールバーを、最初にスクロールしておく大きさ。 |
0 |
外観 |
alternatingRowStyle |
boolean |
'true'のとき、行のスタイルを交互に変える。 |
true |
rtlTable |
boolean |
RTL言語向けに、列の並びを反転して表示する。 |
false |
cssClassNames |
object |
テーブル要素のスタイル名を定義したオブジェクト。下表に示す要素ごとのプロパティで設定する。 |
null |
cssClassNamesのプロパティ
分類 |
プロパティ名 |
スタイル名の適用場所 |
行 |
headerRow |
ヘッダ行 |
tableRow |
行 |
oddTableRow |
奇数行 |
セル |
headerCell |
ヘッダ セル |
tableCell |
セル |
行番号 |
rowNumberCell |
行番号の列 |
|
selectedTableRow |
選択された行 |
hoverTableRow |
マウスがホバーされた行 |
イベント処理
イベント |
説明 |
引数 |
sort |
列ヘッダがクリックされ、ソートが実行されるときに発生 |
以下のプロパティを持つオブジェクト
- column … クリックされた列番号
- ascending … 'true'ならば昇順
- sortedIndexes … ソート後の行番号の配列
|
select |
行が選択されたときに発生 |
なし |
page |
ページボタンがユーザーにクリックされたとき発生 |
page … 移動先のページ番号 |
ready |
チャートが外部メソッドから呼ばれる用意ができたときに発生 |
なし |
google.visualization.events.addListener( table, 'sort',
function( e )
{
alert( e.column + '列目がクリックされた' );
}
);
実行例
サンプルコード
function DrawVisualization()
{
var data = new google.visualization.DataTable();
data.addColumn( 'string', '都道府県' );
data.addColumn( 'number', '人口' );
data.addRows( [
[ 'Hokkaido', 554 ],
[ 'Aomori', 139 ],
[ 'Iwate', 135 ],
[ 'Miyagi', 234 ],
[ 'Akita', 111 ]
] );
var container = document.getElementById( 'visualization' );
var table = new google.visualization.Table( container );
table.draw( data, null );
}
google.load( 'visualization', '1', { packages: [ 'table' ] } );
google.setOnLoadCallback( DrawVisualization );