Google Visualization Table の設定変更。　寝太郎の江戸風呂。ね！

2024
11
26

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/26 (Tue.)

2010
10
11

Google Visualization Table の設定変更。

前回の「Google Visualization Table のページ処理。」では、Google Visualization の Table オブジェクトの draw メソッドを実行する際に、設定によりページ化(pagenation)を実現できることを示しました。今回は、ページ化(pagenation)のほかにどのような設定ができるか見てみましょう。

■　行の並び順(sort)
特に指定しなければ、元とする dataTable と同じ順番で表示されます。
そして、項目名のところをクリックすることにより、その項目のデータの値によって昇順に並べ替えたり、降順に並べ替えたりできます。
これらの設定を変更したいときは、次のプロパティの設定値を変えます。

● sortColumn
カラム番号を指定する。初期表示でこのカラムが昇順で並べ替えられます。
デフォルトは「-1」。これはソートカラムを指定しないということでしょう。
● sortAscending
sortColumn を指定した場合に降順にしたい場合に「false」を指定します。
デフォルトは「TRUE」で昇順。sortColumn を指定しない場合には sortAscendingを指定しても無視されます。
● sort
デフォルトでは、カラムの項目名をクリックすると、その項目のデータの値によって昇順に並べ替えたり、降順に並べ替えたりできる設定になっています。そうしたくない場合には、"disable" を指定します。デフォルトは "enable" です。

■　行番号の表示
行番号の表示・非表示を指定できます。
● showRowNumber
行番号を表示したい場合には、「true」を指定します。
デフォルトは「false」で、行番号は表示しません。
● firstRowNumber
行番号の１番目を「1」以外にしたいときに指定します。
デフォルトは「1」です。showRowNumber の指定がなければ無効です。

■　スタイル
● height
テーブルのコンテナ要素の高さを指定します。「px」や「em」などスタイルシートで用いる単位をつけられます。数字だけの場合は「px」とみなします。データタイプは「String」です。テーブルがこの指定の中に収まらないときは、スクロールバーが表示されます。この指定がない場合は、テーブルが表示されるようにブラウザが自動的にレンダリングするはずです。
● width
テーブルのコンテナ要素の幅を指定します。「px」や「em」などスタイルシートで用いる単位をつけられます。数字だけの場合は「px」とみなします。データタイプは「String」です。テーブルがこの指定の中に収まらないときは、スクロールバーが表示されます。この指定がない場合は、テーブルが表示されるようにブラウザが自動的にレンダリングするはずです。
● scrollLeftStartPosition
水平スクロールバーの開始位置を数字で指定します。「px」を単位とみなします。
● alternatingRowStyle
行の色合いを交互に変えたくない場合に「false」を指定します。　
デフォルトは「TRUE」で、交互に色合いが変わります。

■　クラスネーム割当て(cssClassNames)
特定の行やセルに対して、CSS スタイルシート(stylesheet)のクラスネーム(className)を割り当てるには、まず「cssClassNames」プロパティの値にオブジェクトを指定します。そのオブジェクトのプロパティとして下記のプロパティを指定して、クラスネーム(className)を文字列で割り当てます。
＜　行　＞
● headerRow
ヘッダ行の TR 要素。
● tableRow
データ行の TR 要素。
● oddTableRow
奇数行の TR 要素。alternatingRowStyle が True でなければならない。
● selectedTableRow
選択されたデータ行の TR 要素。
● hoverTableRow
マウスカーソルが乗ったデータ行の TR 要素。
＜　セル　＞
● headerCell
ヘッダ行にある TD 要素。
● tableCell
データ行にある TD 要素。
● rowNumberCell
行番号の TD 要素。showRowNumber が true であることが前提。
（例）cssClassNames:{headerRow:'headerRow', hoverRow:'hoverRow'}

■　HTML処理
データに HTML のタグが含まれている場合に、これを HTML として表現するよう設定できます。ただし、元がエスケープ文字に変換されている場合(< や　>　は、&lt; &gt;）には、当然、HTMLと認識されない。
● allowHtml
データに HTML のタグが含まれている場合に、これを HTML として表現するときは、True に設定します。デフォルト値は、false です。

Google Visualization Table の表示設定を行うのは、とても簡単です。draw メソッドの第二引数の options オブジェクトに決められたパラメータを指定するだけです。

コードサンプルを示しましょう。data は、データテーブルオブジェクトとします。

var container=document.getElementById('res');
var table = new google.visualization.Table(container);
var options={
   page:'enable',
   allowHTML:true,
   showRowNumber:true,
   width:'500',
cssClassNames:{
   headerRow:'headerRow',
   hoverTableRow:'hoverRow'}
};
table.draw(data, options);

container は、HTMLテーブルを表示する場所の要素です。上記の例では、id 属性が「res」である要素です。
new 演算子を使って、google.visualization.Table のインスタンスを生成します。
テーブル設定オプションをオブジェクト形式で記述します。
そして、Table オブジェクトの draw メソッドを実行します。そうすると、container 要素内に、データテーブルのデータが、HTML テーブルとして表示されます。
draw メソッドの第二引数は省略可能です。これを省略した場合には、デフォルトの値が適用されます。

それでは、この Google Visualization Table の設定機能を利用して、Google Spreadsheets のデータを表示するサンプルページを示しましょう。
なお、スタイルシートで次のように指定しています。

.headerRow{
background-color:#fcc;
color:#c00;
}
.hoverRow{
color:#c00;
}

■　サンプルページ
gVtable_config.html

■　参考ページ
Google Visualization Table