概要
並べ替えやページ設定が可能なテーブル。テーブルのセルは、書式設定文字列を使用するか、セル値として HTML を直接挿入することによって書式設定できます。数値は右揃えで表示され、ブール値はチェックマークとして表示されます。ユーザーはキーボードまたはマウスを使用して単一の行を選択できます。ユーザーは列ヘッダーをクリックして行を並べ替えることができます。ヘッダー行は、ユーザーがスクロールしても固定されます。このテーブルでは、ユーザーの操作に応じてさまざまなイベントが発生します。
例
<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
|
| alternatingRowStyle |
奇数行と偶数行に交互の背景色を適用するかどうかを決定します。 型: boolean
デフォルト: true
|
| cssClassNames |
各プロパティ名がテーブル要素を記述し、プロパティ値が文字列で、そのテーブル要素に割り当てるクラスを定義するオブジェクト。このプロパティを使用して、テーブルの特定の要素にカスタム CSS を割り当てます。このプロパティを使用するには、オブジェクトを割り当て、プロパティ名でテーブル要素を指定し、プロパティ値は文字列で、その要素に割り当てるクラス名を指定します。ページ上でそのクラスの CSS スタイルを定義する必要があります。次のプロパティ名がサポートされています。
例:
注: CSS では、一部の要素が他の要素をオーバーライドします。たとえば、 タイプ: オブジェクト
デフォルト: null
|
| firstRowNumber |
dataTable の最初の行の行番号。showRowNumber が true の場合にのみ使用されます。 タイプ: 数値
デフォルト: 1
|
| frozenColumns |
固定する左の列の数。これらの列は、残りの列を水平方向にスクロールするときにもそのまま残ります。 タイプ: 数値
デフォルト: null
|
| 身長 |
ビジュアリゼーションのコンテナ要素の高さを設定します。標準の HTML 単位（「100px」、「80em」、「60」など）を使用できます。単位が指定されていない場合、数値はピクセルと見なされます。指定しない場合、ブラウザはテーブルに合わせて高さを自動的に調整し、プロセスで可能な限り縮小します。必要な高さよりも小さく設定すると、テーブルには垂直スクロールバーが追加されます（ヘッダー行も固定されます）。「100%」に設定した場合、テーブルは可能な限りコンテナ要素内に展開されます。 型: string
デフォルト: 自動
|
| page |
データのページングを有効にするかどうかとその方法。次のいずれかの文字列値を選択します。
型: string
デフォルト: 「disable」
|
| pageSize |
ページ オプションでページングが有効になっている場合、各ページの行数。 タイプ: 数値
デフォルト: 10
|
| pagingButtons |
ページング ボタンの指定されたオプションを設定します。以下のオプションがあります。
タイプ: 文字列または数値
デフォルト: 「auto」
|
| rtlTable |
テーブルの列の順序を逆にして、右から左に記述する言語（アラビア語やヘブライ語など）の基本サポートを追加します。これにより、列 0 が右端の列、最後の列が左端の列になります。これは、基になるデータの列インデックスには影響せず、表示順序にのみ影響します。このオプションを選択した場合でも、テーブルの可視化では完全な双方向（BiDi）言語表示はサポートされていません。page オプションを使用してページングを有効にした場合、または必要なテーブルサイズよりも小さい高さと幅のオプションを指定したためにテーブルにスクロールバーがある場合、このオプションは無視されます。 型: boolean
デフォルト: false
|
| scrollLeftStartPosition |
幅プロパティを設定しているため、テーブルに水平スクロールバーがある場合は、水平スクロールの位置をピクセル単位で設定します。表が、左端の列から何ピクセル分だけスクロールされて開きます。 タイプ: 数値
デフォルト: 0
|
| showRowNumber |
true に設定した場合、行番号がテーブルの最初の列に表示されます。 型: boolean
デフォルト: false
|
| sort |
ユーザーが列見出しをクリックしたときに列を並べ替えるかどうかとその方法。並べ替えが有効になっている場合は、sortAscending プロパティと sortColumn プロパティも設定することを検討してください。次のいずれかの文字列値を選択します。
型: string
デフォルト: 「enable」
|
| sortAscending |
最初の並べ替え列が並べ替えられる順序。昇順の場合は true、降順の場合は false です。 型: boolean
デフォルト: true
|
| sortColumn |
テーブルが最初に並べ替えられるときに、データテーブル内の列のインデックスになります。列には、並べ替え順序を示す小さな矢印が表示されます。 タイプ: 数値
デフォルト: -1
|
| startPage |
最初に表示するテーブルページ。 タイプ: 数値
デフォルト: 0
|
| 幅 |
ビジュアリゼーションのコンテナ要素の幅を設定します。標準の HTML 単位（「100px」、「80em」、「60」など）を使用できます。単位が指定されていない場合、数値はピクセルと見なされます。指定しない場合、ブラウザはテーブルに合わせて幅を自動的に調整し、プロセスで可能な限り縮小します。必要な幅より小さく設定すると、テーブルには水平スクロールバーが追加されます。「100%」に設定した場合、テーブルは可能な限りコンテナ要素内に展開されます。 型: string
デフォルト: 自動
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
表を描画します。 戻り値の型: none
|
getSelection() |
標準の getSelection 実装。選択要素は、すべて行要素です。選択した複数の行を返すことができます。選択オブジェクトの行インデックスは、ユーザー操作（並べ替え、ページングなど）に関係なく、元のデータテーブルを参照します。 選択の切り替えは、最初にセルをクリックすると選択され、もう一度クリックすると選択が解除されます。選択イベントが発生しますが、取得した選択オブジェクトではアイテムが選択されません。 戻り値の型: 選択要素の配列
|
getSortInfo() |
このメソッドを呼び出して、並べ替えられたテーブルの現在の並べ替え状態（通常はユーザーが列見出しをクリックして、特定の列で行を並べ替える）に関する情報を取得します。並べ替えを無効にしている場合、このメソッドは機能しません。 コード内でデータを並べ替えていない場合、またはユーザーがコードを選択してデータを並べ替えていない場合は、デフォルトの並べ替え値が返されます。 戻り値の型: 次のプロパティを持つオブジェクト。
|
setSelection(selection) |
標準の 戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
| 名前 | |
|---|---|
| select |
標準の選択イベント。選択できるのは行全体のみです。 プロパティ: なし
|
| page |
ユーザーがページ ナビゲーション ボタンをクリックするとトリガーされます。 プロパティ:
page: 数値。移動先のページのインデックス。 |
| sort |
ユーザーが列ヘッダーをクリックし、並べ替えオプションが無効に設定されていない場合にトリガーされます。 プロパティ: 次のプロパティを持つオブジェクト。
|
| ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、描画メソッドを呼び出す前にこのイベントのリスナーをセットアップし、イベントが発生した後にのみ呼び出す必要があります。 プロパティ: なし
|
フォーマッタ
注: テーブル ビジュアリゼーションには、汎用フォーマッタに置き換えられた一連のフォーマッタ オブジェクトがあります。汎用フォーマッタは同じように動作しますが、あらゆるビジュアリゼーションで使用できます。
次の表に、従来のテーブル フォーマッタとそれに対応する汎用フォーマッタを示します。新しいコードを作成する場合は、汎用フォーマッタを使用する必要があります。
| テーブル フォーマッタ | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
重要: フォーマッタは多くの場合、テキストの書式設定に HTML を使用します。そのため、allowHtml オプションを true に設定する必要があります。
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはサーバーに送信されません。