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() メソッドの使い方についてでした。
