DataTableの使用方法

コンストラクタ

DataTable()

引数なしのコンストラクタでは、空のデータテーブルが作成されます。テーブルの形式はaddColumn()で定義し、データはaddRows()メソッドで追加します。

var data = new google.visualization.DataTable();

data.addColumn( 'string', 'Task' );
data.addColumn( 'number', 'Hours per Day' );

data.addRows( [
    [ 'Work', 10 ],
    [ 'Eat', 2 ],
    [ 'Sleep', { v: 5, f: '5.000' } ]
    ] );

addColumn()とaddRows()メソッドを用いる方法は低速であるため、データ数が1000を超えるならば、次に示すコンストラクタでデータを追加する方法を検討するべきです。

DataTable( data, version )

引数のdataでデータを渡すことで、それで初期化されたデータテーブルが作成されます。versionは通信プロトコルを表し、現在 (2010/12) では0.6となっています。

var data = new google.visualization.DataTable(
    {
        cols:
        [
            { id: 'task', label: 'Task', type: 'string' },
            { id: 'hours', label: 'Hours per Day', type: 'number' }
        ],
        rows:
        [
            { c: [ { v: 'Work' }, { v: 10 } ] },
            { c: [ { v: 'Eat' }, { v: 2 } ] },
            { c: [ { v: 'Sleep' }, { v: 5, f: '5.000' } ] }
        ]
    },
    0.6
);

フォーマット

データは基本的に、次の3つのプロパティにより構成されます。

  • cols … 列 (ヘッダ)
  • rows … 行
  • c … セル
cols (列)
プロパティ 解説
type [必須] 列のデータ型。使用できるのは以下のいずれか。
データ型 説明 記述例
'boolean' ブール値 v:'true'
'number' 数値 v:7, v:3.14, v:-55)
'string' 文字列 v:'hello'
'date' 日付 v:new Date(2008, 0, 15)
'datetime' 日時 v:new Date(2008, 0, 15, 14, 30, 45)
'timeofday'   v:[8, 15, 0], v: [6, 12, 1, 144]
id 列のID。
label ヘッダに表示する文字列。
pattern 数値や日付をフォーマットするために、データソースによって使用される文字列のパターン。
p セルに適用されるカスタム値のマップであるオブジェクト。
rows (行)
プロパティ 解説
c [必須] 行に含まれるセルの配列
c (セル)
プロパティ 解説
v セルの値。
f 表示に用いられる、フォーマットされたセルの値。
p セルに適用されるカスタム値のマップであるオブジェクト。

JSON

DataTable()コンストラクタの引数dataには、JSON形式のデータを渡すこともできます。データは次のような形式で、文字列部分をダブルクォーテーション ( " ) で囲んだものになります。

var jsonData =
'{ "cols":[' +
'      { "id":"task", "label":"Task", "type":"string" },' +
'      { "id":"hours", "label":"Hours per Day", "type":"number" } ],' +
'  "rows":[' +
'      { "c":[ { "v":"Work" }, { "v":10 } ] },' +
'      { "c":[ { "v":"Eat" }, { "v":2 } ] },' +
'      { "c":[ { "v":"Sleep" }, { "v":5, "f":"5.000" } ] } ] }';

var data = new google.visualization.DataTable( jsonData, 0.6 );

メソッド

分類 メソッド 戻り値 説明
プロパティ テーブル 
getTableProperty(
  name  //
  )
不定 テーブルの指定されたプロパティを取得 
setTableProperty(
  name,  //
  value  //
  )
--- テーブルのプロパティを設定 
setTableProperties(
  properties  //
  )
--- テーブルの複数のプロパティを設定 
getTableProperties()
Object テーブルのプロパティのマップを取得
行 
getRowProperty(
  rowIndex,  //
  name       //
  )
不定 行の指定されたプロパティを取得 
setRowProperty(
  rowIndex,  //
  name,      //
  value      //
  )
--- 行のプロパティを設定 
getRowProperties(
  rowIndex  //
  )
Object 行のプロパティのマップを取得 
setRowProperties(
  rowIndex,   //
  properties  //
  )
--- 行の複数のプロパティを設定
列 
getColumnProperty(
  columnIndex,  //
  name          //
  )
不定 列の指定されたプロパティを取得 
setColumnProperty(
  columnIndex,  //
  name,         //
  value         //
  )
--- 列のプロパティを設定 
getColumnProperties(
  columnIndex  //
  )
Object 列のプロパティのマップを取得 
setColumnProperties(
  columnIndex,  //
  properties    //
  )
--- 列の複数のプロパティを設定
セル 
getProperty(
  rowIndex,     //
  columnIndex,  //
  name          //
  )
不定 セルの指定されたプロパティを取得 
setProperty(
  rowIndex,     //
  columnIndex,  //
  name,         //
  value         //
  )
--- セルのプロパティを設定 
getProperties(
  rowIndex,    //
  columnIndex  //
  )
Object セルプロパティのマップを取得 
setProperties(
  rowIndex,     //
  columnIndex,  //
  properties    //
  )
--- セルの複数のプロパティを設定
追加 
addColumn(
  type      // 値の型
  [, label  // 列のラベル
  [, id     // 列のID
  ] ] )
number 新しい列を追加 
addRow(
  opt_cellArray  //
  )
number 新しい行を追加 
addRows(
  numOrArray  //
  )
number 新しい複数の行を追加
挿入 
insertColumn(
  columnIndex,  //
  type          //
  [, label      //
  [, id         //
  ] ] )
--- 新しい列を挿入 
insertRows(
  rowIndex,      //
  numberOrArray  //
  )
--- 新しい行を挿入
削除 
removeColumn(
  columnIndex  // 行番号
  )
--- 列を削除 
removeColumns(
  columnIndex,     // 行番号
  numberOfColumns  // 削除する行数
  )
--- 複数の列を削除 
removeRow(
  rowIndex  //
  )
--- 行を削除 
removeRows(
  rowIndex,     //
  numberOfRows  //
  )
--- 複数の行を削除
列 ID 
getColumnId(
  columnIndex  //
  )
string 列のIDを取得
フォーマット 
getColumnPattern(
  columnIndex  //
  )
string 列のフォーマットを取得
型 
getColumnType(
  columnIndex  //
  )
string 列の型を取得
ラベル 
getColumnLabel(
  columnIndex  //
  )
string 列のラベルを取得 
setColumnLabel(
  columnIndex,  //
  label         //
  )
--- 列のラベルを設定
数 
getNumberOfColumns()
number 列の数を取得
行 数 
getNumberOfRows()
number 行の数を取得
セル 値 
getValue(
  rowIndex,    //
  columnIndex  //
  )
Object セルの値を取得 
setValue(
  rowIndex,     //
  columnIndex,  //
  value         //
  )
--- セルの値を設定
書式化された値 
getFormattedValue(
  rowIndex,    //
  columnIndex  //
  )
string 指定セルの書式化された値を取得 
setFormattedValue(
  rowIndex,       //
  columnIndex,    //
  formattedValue  //
  )
--- セルに書式化された値を設定
  
setCell(
  rowIndex,          //
  columnIndex        //
  [, value           //
  [, formattedValue  //
  [, properties      //
  ] ] ] )
--- セルに値、書式化された値、プロパティを設定
検索 
getFilteredRows(
  filters  //
  )
number[] フィルタに一致する行の一覧を取得 
getColumnRange(
  columnIndex  //
  )
Object 列の最小値と最大値を取得
ソート 
sort(
  sortColumns  //
  )
--- テーブルをソート 
getSortedRows(
  sortColumns  //
  )
number[] ソートされたテーブルの行番号を取得 
getDistinctValues(
  columnIndex  //
  )
object[] 列の値を昇順で取得
複製 
clone()
DataTable DataTableの複製を作成
JSON 
toJSON()
string テーブルをJSON形式で取得

参考