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 );

参考