addRows / addColumnとは?グラフデータ行/列の追加【Google Charts入門】

code

JavaScriptでチャートを描きたいと思った時【Google Charts】が便利ですが、グラフデータを作成するときに覚えておきたい、addRows() addColumn() メソッドの使い方についてです。

Google Chartsとは?

こちらの記事を参考ください。

DataTableクラスについて

2次元の変更可能な値のテーブルを表します

DataTable()

引数なしのコンストラクタでは、空のデータテーブルが作成されます。

コンストラクタ

構文
DataTable(opt_data, opt_version)

opt_data
【オプション】
テーブルの初期化に使用されるデータ。
これはDataTable.toJSON()、入力されたテーブルを呼び出すことによって返されるJSONか、テーブルの初期化に使用されるデータを含むJavaScriptオブジェクトのいずれかです。ここでは、JavaScriptリテラルオブジェクトの構造について説明します。このパラメーターが指定されていない場合、新しい空のデータテーブルが返されます。

opt_version
【オプション】
使用するワイヤプロトコルのバージョンを指定する数値。
これは、Chart ToolsDatasource実装者によってのみ使用されます。現在のバージョンは0.6です。

  • テーブルの形式はaddColumn()
  • データはaddRows()メソッドで追加。
var data = new google.visualization.DataTable();

data.addColumn( 'string', '資産' );
data.addColumn( 'number', 'パーセント' );

data.addRows( [
    [ '株', 30 ],
    [ '債券', 60 ],
    [ 'コモディティ', 10 ]
] );

addColumn()とaddRows()メソッドは低速のため
データ数が1000を超える場合、コンストラクタでJSONデータを追加したほうがいいです。

Google Visualization API Reference
https://developers.google.com/chart/interactive/docs/reference

メソッド

addColumn()

データテーブルに新しい列を追加し、新しい列のインデックスを返します。

方法

addColumn(type, opt_label, opt_id)

または

addColumn(description_object)

戻り値

説明

新しい列のすべてのセルにnull値が割り当てられます。このメソッドには2つのシグネチャがあります。

最初のシグネイチャには次のパラメータがあります。

type
列の値のデータ型を含む文字列。次のいずれかです。
‘string’, ‘number’, ‘boolean’, ‘date’, ‘datetime’, および’timeofday’.

opt_label
【オプション】
列のラベルが付いた文字列。
列ラベルは通常、視覚化の一部として、たとえば表の列ヘッダーとして、または円グラフの凡例ラベルとして表示されます。
値が指定されていない場合、空の文字列が割り当てられます。

opt_id
【オプション】
列の一意の識別子を持つ文字列。値が指定されていない場合、空の文字列が割り当てられます。

2番目の署名には、次のメンバーを持つ単一のオブジェクトパラメータがあります。

  • type – 列のデータ型を説明する文字列。type上記と同じ値 。
  • label – [オプション、文字列] 列のラベル。
  • id – [オプション、文字列] 列のID。
  • role – [オプション、文字列] 列の役割。
  • pattern – [オプション、文字列] 列の値の表示方法を指定する数値(または日付)形式の文字列。

addRow()

データテーブルに新しい行を追加し、新しい行のインデックスを返します。

方法

addRow(opt_cellArray)

戻り値

説明

opt_cellArray
【オプション】
新しい行のデータを指定するJavaScript表記の行オブジェクト。

このパラメーターが含まれていない場合、このメソッドは単にテーブルの最後に新しい空の行を追加します。
このパラメーターはセル値の配列です。

data.addRow(); //空の行を追加します
data.addRow(['Hermione'、new Date(1999,0,1)]); //文字列と日付値を含む行を追加します。

// 2つのセルを持つ行を追加し、2番目のセルにはフォーマットされた値を追加します。
data.addRow(['Hermione'、{v:new Date(1999,0,1)、
                          f: '1月1日、19 99'}
]);

data.addRow(['Col1Val'、null、 'Col3Val']); // 2番目の列は未定義です。
data.addRow(['Col1Val' 、、 'Col3Val']); //前と同じ。

まとめ

JavaScriptでチャートを描きたいと思った時【Google Charts】が便利ですが、グラフデータを作成するときに覚えておきたい、addRows() addColumn() メソッドの使い方についてでした。

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA