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