忍者ブログ

2018
04
24

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/04/24 (Tue.)

2010
10
16

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

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

数の配列

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

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

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

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

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

function setCalc(dataTable,rowNum){
 return (dataTable.getValue(rowNum, 1) * Math.PI);
}
{calc:setCalc, type:'number', label:'Diameter'}

最小値,最大値

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

hideColumns

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

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

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

  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 となります。引数に数字を2個指定すると、第一引数以上第二引数以下の行番号のデータを持つ ViewTable となります。

hideRows

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

行関連関数の利用例

2番目のカラムの値が"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);

サンプルページ

DataView の表示サンプル

参考

DataView - Google Visualization API Reference
PR

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

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

03 2018/04 05
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア