寝太郎の江戸風呂。ね！

[PR]

2025/10/25 (Sat.)

google.visualization.Table もどきを作る。

google.visualization.Table は、HTML文書でテーブルを表示する時に、とても便利なツールです。今回は、google.visualization.Table に似せたコンストラクタを作成してみましょう。そうすることで、Google Visualization の世界が少しはわかるかもしれません。

Table コンストラクタの書式

table=new neta.vis.Table(container)

引数は、コンボボックスを配置する先の HTML 要素です。TABLE要素を生成します。実際に内容を配置するには draw メソッドを実行します。

draw メソッドの書式

table.draw(dataTable, options)

draw メソッドの引数

draw メソッドの第一引数は、後述する DataTable オブジェクトです。

draw メソッドの第二引数は、オプションオブジェクトです。現在、この指定は無効です。

DataTable コンストラクタの書式

dataTable=new neta.vis.DataTable(dataSource, version)

Google Visualization において DataTable は、取り扱うデータを格納するとともに、それらのデータの追加、変更、削除、取得に関するメソッドを提供するオブジェクトです。ここで真似る neta.vis.DataTable コンストラクタでは、メソッドは未定義です。カラムのデータは A プロパティに、行のデータは F プロパティに格納します。

第一引数は、データソースです。ここでは、次の書式のオブジェクトが有効です。

{cols:[
 {type:'データタイプ'},
 {type:'データタイプ'}
 ],
 rows:[
 {c:[{v:値},{v:値, f:表示値},
 {c:[{v:値},{v:値, f:表示値}
 ]
}

第二引数は、Google Visualization のバージョンです。ここでは、無効です。なお、Google Visualization の現行バージョンは 0.6 です。

記述例

neta.addListener(function(){
 var table = new neta.vis.Table(
  document.getElementById('div20101112'));
 var dat=document.getElementById('data20101112');
 var d2=neta.toD2(dat.value||dat.innerHTML);
 var dataSource=neta.vis.d2toDataSource(d2);
 var dataTable=new neta.vis.DataTable(dataSource);
 table.draw(dataTable);
});

ここにおいて、neta.addListener は、ロード時に実行する関数を登録する関数、neta.toD2 は、文字列を二次元配列に変換する関数です。また、neta.vis.d2toDataSource は、二次元配列から dataSource オブジェクトを生成する関数です。

実行例

次のデータは、id属性が"data20101112"であるPRE要素の内容です。

1,A
2,B
3,C

上記のデータを読みとって、次にテーブルとして表示しました。

ソースコード

if(!window['neta']['vis'])window['neta']['vis']={};
(function(){
 var a=neta.vis;
 var E=neta.elements;
 // DataTable
 a.DataTable=function(dataSource, version){
  this.Rb=version||0.6;
  this.A=dataSource.cols||[];
  this.F=dataSource.rows||[];
  this.Va=null;
 }
 // Table
 a.Table=function(container){
  this.container=container||document.body;
  this.element=E.element('table');
  var self=this;

  self.draw=function(dataTable,options){
   options={};//undefined now
   self.element.innerHTML='';
   self.element.thead=E.element('thead');
   self.element.thead.tr=E.element('tr');
   for(var j=0;j<dataTable.A.length;j++){
    var th=E.element('td',{
     innerHTML:dataTable.A[j].label?dataTable.A[j].label:
     ''});
    self.element.thead.tr.append(th);
   }
   self.element.thead.append(self.element.thead.tr);
   self.element.tbody=E.element('tbody');
   for(var i=0;i<dataTable.F.length;i++){
    var tr=E.element('tr');
    for(var j=0;j<dataTable.F[i].c.length;j++){
     var td=E.element('td',{
      innerHTML:dataTable.F[i].c[j].f?dataTable.F[i].c[j].f:
      dataTable.F[i].c[j].v});
     tr.append(td);
    }
    self.element.tbody.append(tr);
   }
   self.element.append([self.element.thead,self.element.tbody]);
   self.container.appendChild(self.element);
  }
 }

 a.d2toDataSource=function(d2){
  var data={cols:[],rows:[]};
  var len=d2[0].length;
  for(var j=0;j<len;j++){
    data.cols.push({type:'string'})
  }
  for(var i=0;i<d2.length;i++){
   data.rows[i]={c:[]};
   for(var j=0;j<d2[i].length;j++){
     data.rows[i].c.push({v:d2[i][j]})
   }  
  }
  return data;
 }
})();

スクリプトの収録先

2010/11/12 (Fri.) Trackback() Comment(0) JavaScript