寝太郎の江戸風呂。ね！

[PR]

2024/11/23 (Sat.)

Google Visualization DataView

Google Visualization の DataView オブジェクトは、DataTable オブジェクトのサブセットです。Google Visualization の DataView オブジェクトを生成するには、引数に DataTable オブジェクト か別の DataView オブジェクト を指定して、google.visualization.DataView コンストラクタ を new 演算子で実行します。

/** data をすでに生成されているDataTable オブジェクトとします。**/
var view=new google.visualization.DataView(data);

DataViewオブジェクトを生成したばかりの段階では、DataViewオブジェクトの内容は、元とした DataTable オブジェクト（または DataView オブジェクト）と同じです。各種のメソッドを実行することにより、計算カラムを追加したり、行や列の表示を変更できます。

ViewTable メソッド(列関係）

ViewTable オブジェクトの列操作に関するメソッドである setColmuns と hideColumns について記します。

setColmuns

表示する列を指定します。引数のとり方には３種類あります。

数の配列

元とする DataTable オブジェクト（または DataView オブジェクト）のインデックス番号を、並ばせたい順番に並べます。同じ番号を複数回指定できます。

数と計算カラムオブジェクトの配列

計算カラムを設定したいときは、次のような書式で記述したオブジェクトを配列の要素とします。

{calc:計算関数, type:'データタイプ', label:'ラベル名'}

計算関数には２つの引数が必要で、第一引数は元とした DataTable オブジェクト、第二引数は行インデックスとみなして処理内容を記述します。２列目のカラムの値に 円周率 を乗じた値を表示するには、次のように関数を定義します。そして、定義した関数を参照させるよう、計算カラムオブジェクトのcalcプロパティにその関数名(setCalc）を記述します。

function setCalc(dataTable,rowNum){
 return (dataTable.getValue(rowNum, 1) * Math.PI);
}

{calc:setCalc, type:'number', label:'Diameter'}

最小値,最大値

配列ではなく、２個の数字を引数にした場合には、それらを含めた列番号の列を表示します。

hideColumns

引数に数字の配列を取ると、その列番号の列は表示されず、それ以外の列が表示されます。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号の列は表示されず、それ以外の列が表示されます。

列関連関数の利用例 - 計算カラム

計算カラムの設定例を次に示します。DataView の元となっている DataTable から行番号(index)を取得して３番目のカラムに表示します。

  var container=document.getElementById('res2');

  var table=new google.visualization.Table(container);
  function setCalc(data,rowNum){
    return rowNum;
  }
  var calcColumn={calc:setCalc, type:'number', label:'INDEX'};

  view.setColumns([0,1,calcColumn]);

  table.draw(view,options);

ViewTable メソッド(行関係）

ViewTable オブジェクトの列操作に関するメソッドである getFiltererRows、 setRows、 hideRows について記します。

getFiltererRows

カラムの値が指定した条件に一致する行の行番号の配列を返します。その配列を setRows メソッドの引数にすることで、カラムの値が指定した条件に一致するデータを持つ ViewTable となります。

引数は、オブジェクトを要素とする配列です。各オブジェクトは column プロパティを持ち、比較対象とする列番号を指定します。そして、 value プロパティで抽出対象とする値を指定します。value プロパティに代え、minValue, maxValue のプロパティで範囲指定することもできます。

{column: 1, minValue: 'B', maxValue: 'D'}

setRows

引数に数字の配列を取ると、その行番号のデータを持つ ViewTable となります。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号のデータを持つ ViewTable となります。

hideRows

引数に数字の配列を取ると、その行番号以外のデータを持つ ViewTable となります。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号以外のデータを持つ ViewTable となります。

行関連関数の利用例

２番目のカラムの値が"B"であるものを表示します。

  var container=document.getElementById('res2');

  var table=new google.visualization.Table(container);
  function setCalc(data,rowNum){
    return rowNum;
  }
  var calcColumn={calc:setCalc, type:'number', label:'INDEX'};

  view.setColumns([0,1,calcColumn]);

  table.draw(view,options);

サンプルページ

参考

2010/10/16 (Sat.) Trackback() Comment(0) Google Visualization