概要
並べ替えとページ設定が可能なテーブル。表のセルの書式を設定するには、書式設定文字列を使用するか、セル値として HTML を直接挿入します。数値は右揃えされ、ブール値はチェックマークとして表示されます。ユーザーは、キーボードまたはマウスを使用して 1 行を選択できます。 ユーザーは、列のヘッダーをクリックして行を並べ替えることができます。ユーザーがスクロールしても、ヘッダー行は固定されたままです。このテーブルは、ユーザーの操作に対応するいくつかのイベントを呼び出します。
例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
読み込み中
google.charts.load
パッケージ名は "table"
です。
google.charts.load('current', {packages: ['table']});
ビジュアリゼーションのクラス名は google.visualization.Table
です。
var visualization = new google.visualization.Table(container);
データ形式
DataTable は、対応する HTML テーブルに変換され、DataTable の各行/列は HTML テーブルの行/列に変換されます。各列は同じデータ型でなければならず、すべての標準的な可視化データ型(文字列、ブール値、数値など)がサポートされます。
カスタム プロパティ
DataTable の setProperty()
メソッドを使用して、以下のカスタム プロパティをデータテーブル要素に割り当てることができます。
プロパティ名 | 対象 | 説明 |
---|---|---|
className | Cell | 個々のセルに割り当てる文字列クラス名。これを使用して、個々のセルに CSS スタイルを割り当てます。 |
スタイル | Cell | セルにインラインに割り当てるスタイルの文字列。これにより、そのセルに適用されている CSS クラスのスタイルがオーバーライドされます。これを機能させるには、プロパティ allowHTML=true を設定する必要があります。(例: 'border: 1px solid green;' )。 |
サンプル
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
設定オプション
名前 | |
---|---|
allowHTML |
true に設定すると、HTML タグを含むセルの書式設定された値は HTML としてレンダリングされます。false に設定すると、ほとんどのカスタム フォーマッタが適切に機能しなくなります。 型: boolean
デフォルト: false
|
交互の行スタイル |
交互のカラースタイルを奇数行と偶数行に割り当てるかどうかを決定します。 型: boolean
デフォルト: true
|
cssClassNames |
各プロパティ名にテーブル要素を記述するオブジェクトで、プロパティ値は文字列で、そのテーブル要素に割り当てるクラスを定義します。このプロパティを使用して、テーブルの特定の要素にカスタム CSS を割り当てます。このプロパティを使用するには、オブジェクトを割り当てます。ここで、プロパティ名はテーブル要素を指定し、プロパティ値は文字列で、その要素に割り当てるクラス名を指定します。次に、ページ上のそのクラスの CSS スタイルを定義する必要があります。次のプロパティ名がサポートされています。
例:
注: CSS では、一部の要素が他の要素よりも優先されます。たとえば、 タイプ: オブジェクト
デフォルト: null
|
最初の行番号 |
dataTable の最初の行の行番号。showRowNumber が true の場合にのみ使用されます。 タイプ: 数値
デフォルト: 1
|
frozenColumn |
固定する左端の列の数。これらの列は、残りの列を横方向にスクロールしてもそのまま残ります。 タイプ: 数値
デフォルト: null
|
高さ |
ビジュアリゼーションのコンテナ要素の高さを設定します。標準の HTML 単位(100px、80em、60 など)を使用できます。単位を指定しない場合、ピクセル数とみなされます。指定しない場合、ブラウザはプロセスに合わせて可能な限り高さを自動的に調整し、その過程でできるだけ小さくなります。必要な高さよりも小さい値が設定されている場合、テーブルには垂直スクロールバーが追加されます(ヘッダー行も固定されます)。「100%」に設定すると、テーブルはコンテナ要素に可能な限り拡大されます。 型: string
デフォルト: 自動
|
page |
データのページ分けを有効にするかどうか、また有効にする方法。次のいずれかの文字列値を選択します。
型: string
デフォルト: 「disable」
|
pageSize |
ページ オプションを使用してページ設定を有効にした場合の、各ページの行数。 タイプ: 数値
デフォルト: 10
|
pagingButtons |
ページング ボタンに指定したオプションを設定します。以下のオプションがあります。
タイプ: 文字列または数値
デフォルト: 「auto」
|
RTL テーブル |
表の列の順序を逆にして、右から左に記述する言語(アラビア語やヘブライ語など)の基本的なサポートを追加します。これにより、列 0 が右端の列、最後の列が左端の列となります。これは元のデータの列インデックスには影響しません。表示の順序のみが影響を受けます。このオプションを使用しても、テーブルの可視化では完全な双方向(BiDi)言語の表示はサポートされません。ページングを有効にした場合(ページ オプションを使用する場合)や、必要なテーブルサイズより小さい高さと幅を指定したためテーブルにスクロールバーがある場合、このオプションは無視されます。 型: boolean
デフォルト: false
|
ScrollLeftStartPosition |
width プロパティが設定されているため、テーブルに水平スクロール バーがある場合、水平スクロール位置をピクセル単位で設定します。このテーブルでは、一番左の列よりも左にあるピクセル数だけ、スクロールされて開きます。 タイプ: 数値
デフォルト: 0
|
表示行番号 |
true に設定すると、行番号がテーブルの最初の列として表示されます。 型: boolean
デフォルト: false
|
sort |
ユーザーが列の見出しをクリックしたときに列を並べ替える方法と方法。並べ替えが有効になっている場合は、sortAscending プロパティと sortColumn プロパティの設定も検討してください。次のいずれかの文字列値を選択します。
型: string
デフォルト: 「enable」
|
昇順 |
最初の並べ替え列の並べ替え順序。昇順の場合は true、降順の場合は false です。 型: boolean
デフォルト: true
|
並べ替え列 |
データテーブル内の列のインデックス。テーブルが最初に並べ替えられます。並べ替え順序を示す小さな矢印が列にマークされます。 タイプ: 数値
デフォルト: -1
|
startPage |
表示する最初のテーブルページ。 タイプ: 数値
デフォルト: 0
|
width |
ビジュアリゼーションのコンテナ要素の幅を設定します。標準の HTML 単位(100px、80em、60 など)を使用できます。単位を指定しない場合、ピクセル数とみなされます。指定しない場合、ブラウザはテーブルに合わせて幅を自動的に調整し、プロセスで可能な限り小さくします。必要な幅よりも小さい値を設定すると、テーブルには水平方向のスクロールバーが追加されます。「100%」に設定すると、テーブルはコンテナ要素に可能な限り拡大されます。 型: string
デフォルト: 自動
|
メソッド
メソッド | |
---|---|
draw(data, options) |
テーブルを描画します。 戻り値の型: なし
|
getSelection() |
標準の getSelection 実装。選択要素はすべて行要素です。複数の選択した行を返すことができます。選択オブジェクトの行インデックスは、ユーザーの操作(並べ替え、ページ分けなど)に関係なく、元のデータテーブルを参照します。 選択は切り替わります。セルを初めてクリックすると、そのセルが選択されます。セルを再度クリックすると、選択が解除され、選択イベントが発生しますが、取得した選択オブジェクト内に選択されたアイテムはありません。 戻り値の型: 選択要素の配列
|
getSortInfo() |
このメソッドは、並べ替えられたテーブルの現在の並べ替え状態に関する情報を取得します(通常は、ユーザーが列見出しをクリックして特定の列で並べ替えるためです)。並べ替えを無効にしている場合、この方法は機能しません。 コード内でデータを並べ替えていない場合や、ユーザーがコードを選択してデータを並べ替えていない場合は、デフォルトの並べ替え値が返されます。 戻り値の型: 次のプロパティを持つオブジェクト。
|
setSelection(selection) |
標準の 戻り値の型: なし
|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
イベント
名前 | |
---|---|
select |
標準の選択イベントですが、選択できるのは行全体のみです。 プロパティ: なし
|
page |
ユーザーがページ ナビゲーション ボタンをクリックしたときにトリガーされます。 プロパティ:
page : 数値。移動先のページのインデックス。 |
sort |
ユーザーが列ヘッダーをクリックし、並べ替えオプションが「無効」以外の場合にトリガーされます。 プロパティ: 次のプロパティを持つオブジェクト。
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを操作し、描画後にメソッドを呼び出す場合は、描画メソッドを呼び出す前にこのイベント用のリスナーを設定して、イベントが発生した後にのみ呼び出す必要があります。 プロパティ: なし
|
フォーマッタ
注: テーブル ビジュアリゼーションには、同じ動作をする汎用フォーマッタに置き換わった一連のフォーマッタ オブジェクトがありますが、どのビジュアリゼーションでも使用できます。
次の表に、以前のテーブル フォーマッタとそれに対応する汎用フォーマッタを示します。新しいコードを記述するときは、汎用フォーマッタを使用する必要があります。
テーブル フォーマッタ | |
---|---|
TableArrow 形式 | google.visualization.ArrowFormat |
TableBarFormat | google.visualization.BarFormat |
TableColorFormat | google.visualization.ColorFormat |
テーブル日付形式 | google.visualization.DateFormat |
テーブル番号の形式 | google.visualization.NumberFormat |
TablePattern 形式 | google.visualization.PatternFormat |
重要: フォーマッタでは HTML を使用してテキストの書式を設定することがよくあります。そのため、allowHtml
オプションを true
に設定する必要があります。
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。