Google Visualization API をマスターするために、これまで色々なテストページを作成してきました。より簡単にテストページを作りたいので、二次元配列をデータ元とする関数を考えました。ついでに文字列から二次元配列を抽出する関数も掲載しましょう。
これは、次のようなデータを PRE要素内等に記述しておき、その要素の innerHTML を取得して、split メソッドで区切り文字によって配列化しようというものです。
Nation,Group China,A Kuwait,A Qatar,A Uzbekistan,A Japan,B Jordan,B Saudi Arabia,B Syrian,B Australia,C Bahrain,C India,C Korea,C DPRK,D Iran,D Iraq,D UAE,D
第一引数に対象とする文字列、第二引数にカラム間の区切り文字、第三引数に行間の区切り文字を指定して、次のような処理を行って、配列を返します。
function stringToArray(str,sep2,sep1){
sep1=sep1||"\n";
sep2=sep2||",";
var rows=str.split(sep1);
for(var i=0;i<rows.length;i++){
rows[i]=rows[i].split(sep2);
}
return rows;
}
CSV(Commma Separated Value)などを二次元配列にすることができます。
このコードは、次のようなものです。
function dataTableFromArray(array,columns){
cols=[];
if(!columns){
for(var j=0;j<array[0].length;j++){
cols.push({id:array[0][j], label:array[0][j], type:'string'});
}
}
var rows=[];
for(var i=columns?0:1;i<array.length;i++){
var c=[];
for(var j=0;j<array[i].length;j++){
c.push({v:array[i][j]});
}
rows.push({c:c});
}
return new google.visualization.DataTable({cols:cols, rows:rows},0.6);
}
第一引数に二次元配列を取ります。第二引数は、カラム見出しのオブジェクトです。カラム見出しのオブジェクトは、次のような書式です。第二引数がない場合には、二次元配列の1行目のデータから自動的に生成します。
[{id:'ID', label:'ラベル名', type:'データタイプ'},{同左},・・,{同左}]
dataTable オブジェクトから HTMLのテーブルを表示するための関数の例を次に示します。
function drawTable(){
var options={};
var container=document.getElementById('res');
var str=document.getElementById('csv').innerHTML;
var rows=stringToArray(str,",","\n");
var data=dataTableFromArray(rows);
var table=new google.visualization.Table(container);
table.draw(data,options);
}
options は、Google Visualization Table のテーブルオプションです。ページ、ソートなどの設定を行いたいときは、この options に記述します。container は、HTMLテーブルを表示する要素を指定します。
以上のようにテーブル表示関数に、処理の詳細を記述しておいたうえで、実行処理を次のように記述します。
google.load('visualization', '1', {'packages':['table']});
google.setOnLoadCallback(drawTable);
これは、Google Visualization の table パッケージをロードし、それから darwTable 関数を実行するという記述です。