Google Chart Tools - 表とデータの扱い

今回は Google Chart Tools を使ったの作成と Google Chart でデータ(DataTable)の扱いについて説明します。


html で表が書けるのになぜわざわざ Google Chart Tools で表を書くの ? と思われるかも知れませんが、 Google Chart Tools の表では次のことが簡単にできます。
  • ソート
  • テーブル内に割合のバーなどを表示
  • ページ分割(ページネーション)
  • 他のグラフと連携
  • フィルタリング

特にソートやフィルターでは、データを値と表示文字を分けて管理できるので、 文字列の比較ではなく、実際の値での比較ができるようになっています。
なお、他のグラフとの連携やフィルタリングについては次回以降に説明する予定です。 また、 Google Chart では DataTable を元にグラフを描画します。
表(のグラフ)は DataTable をそのまま表示しているようなものです。 Google Chart のデータの扱いの理解に表はちょうどいいのではないかと思います。

基本的な表の作成

まずは基本的な表の書き方を説明します。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
      
        var data = new google.visualization.DataTable();
        data.addColumn('string', '名前');
        data.addColumn('number', '給料');
        data.addColumn('boolean', 'フルタイム');
        data.addRows([
            ['Mike',  {v: 10000, f: '$10,000'}, true ],
            ['Jim',   {v: 8000,  f: '$8,000'},  false],
            ['Alice', {v: 12500, f: '$12,500'}, true ],
            ['Bob',   {v: 7000,  f: '$7,000'},  true ]
        ]);
        
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }

     </script>
   </head>
 
   <body>
     <div id="table_div" style="width: 80%; "></div>
   </body>
 </html>
前回の折れ線グラフと書き方はほぼ同じです。 違いは次のところです。
  • ロードパッケージが 'table'
  • 描画用クラスが google.visualization.Table
サンプルの表のヘッダーをクリックしてもらうとわかると思いますが、 これだけでソート可能な表になっています。

データを値と表示文字を分ける場合には、オブジェクトで指定します。 この場合 v が値f が表示文字列です。
これ以外にも p で装飾を指定することもできます。 装飾に関しては 'className' で html タグのクラス名を指定できるので、 CSS で指定することもできます。
'style' で直接 CSS のスタイルも書けます。

データテーブル(DataTable)

Google Chart Tools で扱うデータは google.visualization.DataTable オブジェクトです。
これは 2 次元のデータと列情報の配列を持ちます。 列情報ではラベルや列に格納するデータの型を保持します。
列情報にデータ型情報を持っているので、 同一の列では同じ型のみ格納できます。

データテーブルの作成は 3 つの方法があります。
  1. 空のオブジェクトを作成し、addColumn, addRows などでデータを格納
  2. JSON 形式で定義したデータから作成
  3. 2 次元配列から作成
前章のサンプルは 1 番目の方法です。

2 番目は JSON スタイルでオブジェクトを作成し、 それを元に DataTable を作成する方法です。
記述が面倒なので、この形式でコード内に直接記述することはあまりないかもしれません。 ただし、 1 番目の方法に比べるとロードが速いので、 データの量が多い場合などではこちらの方がいいでしょう。
var dataAsJson =
   {cols:[
       {id:'A',label:'名前',type:'string'},
       {id:'B',label:'給料',type:'number'},
       {id:'C',label:'フルタイム',type:'boolean'}],
    rows:[
        {c:[{v:'Mike'},{v:10000,f:'$10,000'},{v:true,f:'TRUE'}]},
        {c:[{v:'Jim'},{v:8000,f:'$8,000'},{v:false,f:'FALSE'}]},
        {c:[{v:'Alice'},{v:12500,f:'$12,500'},{v:true,f:'TRUE'}]},
        {c:[{v:'Bob'},{v:7000,f:'$7,000'},{v:true,f:'TRUE'}]}]
   };    
var data = new google.visualization.DataTable(dataAsJson);
前回の折れ線グラフの例では arrayToDataTable を使った二次元配列から作成する 3 番目の方法でした。
この場合、 1 列目からラベルを取得し、各列のデータから自動的に型を判定しています。 今回のサンプルを arrayToDataTable を使って作成すると次のようになります。
var data = new google.visualization.arrayToDataTable([
    ['名前', '給料', 'フルタイム'],
    ['Mike',  10000, true ],
    ['Jim',   8000,  false],
    ['Alice', 12500, true ],
    ['Bob',   7000,  true ]
]);

ただし、表示文字と値を分けていません。 これは arrayToDataTable ではオブジェクトによる指定はできないためです。

二次元配列から作成するのが一番簡単ですが、 値と表示文字を分ける場合には addColumn, addRows 等を使うか JSON スタイルで作成する必要があります。

なお、 arrayToDataTable でもデータの先頭列(2 列目)以降であれば、 オブジェクトによる指定も可能です。

フォーマット

{v: 10000, f: '$10,000'} のように似たものを 2 回書いたり、配列から DataTable が作れないのは面倒だなと感じたかもしれません。 こういった場合は Format の機能を使えます。

また、 Format ではデータの表示を国際化することもできます。
国際化の言語はブラウザーの設定がデフォルトです。 これはパッケージロード時に明示的に変更することも可能です。

数値フォーマット

数値の場合には NumberFormat を使用します。
 var data = new google.visualization.arrayToDataTable([
     ['名前', '給料', '到達率'],
     ['Mike',  10000, 0.2 ],
     ['Jim',   8000,  1.0],
     ['Alice', 12500, 0.9 ],
     ['Bob',   7000, 0.7 ]
 ]);
 
 var table = new google.visualization.Table(document.getElementById('gct_table_number_format'));
 
 // 2 列目のフォーマッター
 var formatter1 = new google.visualization.NumberFormat({pattern: '$#,###'});
 formatter1.format(data, 1);
 
 // 3 列目のフォーマッター
 var formatter2 = new google.visualization.NumberFormat({pattern: '###%'});
 formatter2.format(data, 2);
 
 table.draw(data, {showRowNumber: true});
NumberFormat のインスタンス作成時に渡すオブジェクトで表示形式を指定します。
prefixsuffix といった要素もあるのですが、 pattern が指定されているとこちらが使用されます。 ここには 数値用の ICU のパターンを指定します。

日付フォーマット

日付の場合には DateFormat を使用します。
 var data = new google.visualization.DataTable();
 data.addColumn('string', '雇用者名前');
 data.addColumn('date', '開始日 (Long 表記)');
 data.addColumn('date', '開始日 (Short 表記)');
 data.addRows([
     ['Mike', new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26)],
     ['Bob', new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0)],
     ['Alice', new Date(2006, 7, 16), new Date(2006, 7, 16)]
 ]);
 
 // フォーマッターの作成
 var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
 var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
 
 // データを整形
 formatter_long.format(data, 1);
 formatter_short.format(data, 2);
 
 // データを描画
 var table = new google.visualization.Table(document.getElementById('gct_table_date_format'));
 table.draw(data, {showRowNumber: true});
データには JavaScript の Date オブジェクトを格納し、 DateFormat で表示形式を指定します。

formatType には "long", "short" の他に "medium" もあります。 ただし、日本語では short と medium は同じです。
DateFormat を使わずにそのまま表示した場合も short です。

また、pattern で出力形式を詳細に設定することもできます。 この場合には 日付用の ICU のパターンを指定します。

ちなみに Google Chart Tools というよりも JavaScript の注意点があります。
日付は Date(年, 月, 日) と指定します。 この際、 年、日は一般的な 2012 や 1 - 31 といった数値を指定しますが、 月は 0(1 月) - 11(12 月) で指定します。

パターンフォーマット

複数の列から新しい列を作成する場合には PatternFormat を使用します。
 var data = new google.visualization.DataTable();
 data.addColumn('string', '名前');
 data.addColumn('string', 'E-Mail');
 data.addRows([
     ['John Lennon', 'john@beatles.co.uk'],
     ['Paul McCartney', 'paul@beatles.co.uk'],
     ['George Harrison', 'george@beatles.co.uk'],
     ['Ringo Starr', 'ringo@beatles.co.uk']
 ]);
 
 var table = new google.visualization.Table(document.getElementById('gct_table_pattern_format_div'));
 
 var formatter = new google.visualization.PatternFormat('<a href="mailto:{1}">{0}</a>');
 // フォーマッターで、 0, 1 の列のデータから作ったデータを 0 列に格納
 formatter.format(data, [0, 1]);
 
// 先頭(0)列のみ表示するように DataView を作成
 var view = new google.visualization.DataView(data);
 view.setColumns([0]);
 
 // 渡すのは data ではなく、 view
 // allowHtml はテーブル内での html 記述許可の設定
 table.draw(view, {allowHtml: true, showRowNumber: true});
PatternFormat を使い、 2 つの列から新しいデータを作成し、 1 列目に格納しています。

PatternFormat::format(データ, 利用する列の列番号配列 [, 格納先の列番号]); // 格納先を省略した場合には利用した列に格納されます
テーブルの描画には通常は DataTable を直接渡しますが、 表示する列を指定するために DataView を作成し、それを介して描画しています。

装飾系フォーマット

前章は表示文字を変更するための Format でしたが、 テーブル内にバーを表示するといった装飾的な機能も Format で実現します。

バーフォーマット

テーブル内にバーを表示する場合には BarFormat を使用します。
 var data = new google.visualization.DataTable();
 data.addColumn('string', '分類');
 data.addColumn('number', '収入');
 data.addRows([
     ['靴', 10700],
     ['スポーツ', -15400],
     ['おもちゃ', 12500],
     ['電化製品', -2100],
     ['食品', 22600],
     ['美術品', 1100]
 ]);
 
 var table = new google.visualization.Table(document.getElementById('gct_table_bar_format'));
 
 // バーの幅を 120pt に設定。(デフォルトは 100)
 var formatter = new google.visualization.BarFormat({width: 120});
 formatter.format(data, 1); //  2 番目の列に適用
 
 table.draw(data, {allowHtml: true, showRowNumber: true});

矢印フォーマット

テーブル内に矢印を表示する場合には ArrowFormat を使用します。
 var data = new google.visualization.arrayToDataTable([
     ['分類', '収益率'],
     ['靴', 0.12],
     ['スポーツ', -0.073],
     ['おもちゃ', 0],
     ['電化製品', -0.21],
     ['食品', 0.22]
 ]);
 
 var table = new google.visualization.Table(document.getElementById('gct_table_number_format'));
 
 // 数値フォーマットも使用
 var num_formatter = new google.visualization.NumberFormat({pattern: '###.#%'});
 num_formatter.format(data, 1);
 
 // 矢印フォーマット
 var formatter = new google.visualization.ArrowFormat();
 formatter.format(data, 1);
 
 var table = new google.visualization.Table(document.getElementById('gct_table_arrow_format'));
 table.draw(data, {allowHtml: true, showRowNumber: true});

カラーフォーマット

セルの値に応じて色を変更する場合には ColorFormat を使用します。
 var data = new google.visualization.arrayToDataTable([
     ['名前', '点数'],
     ['Mike',  38 ],
     ['Jim',   85],
     ['Alice', 52 ],
     ['Bob',   70 ]
 ]);
 
 var table = new google.visualization.Table(document.getElementById('gct_table_number_format'));
 
 // 数値のフォーマッターも使用
 var formatter1 = new google.visualization.NumberFormat({suffix:'点'});
 formatter1.format(data, 1);
 
 var formatter = new google.visualization.ColorFormat();
 // 0 - 40 は白字に赤
 formatter.addRange(0, 40, 'white', 'red');
 // 40 - 80 は黄色から白への段階
 formatter.addGradientRange(40, 80, null, 'yellow', 'white');
 // 80 - 100 は青字
 formatter.addRange(80, 100, 'blue', null);
 formatter.format(data, 1);
 
 table.draw(data, {allowHtml: true, showRowNumber: true});
色と範囲の設定は次の関数を使います。
  • addRange(開始値, 終了値, 文字色, 背景色)
  • addGradientRange(開始値, 終了値, 文字色, 開始背景色, 終了背景色)
addGradientRange は値に応じて段階的に背景色を決定します。
ちなみに段階的に文字色(前景色)を指定する関数はありません。

ページ分割

ページ分割(ページネーション, ページング) というのは、データがたくさんある場合に 一定数づつ分割して表示することを言います。
個人的には一度に表示してスクロールで見る方が好きなのですが、 海外ではページ分割して表示するのが主流っぽいです。

ページ分割するにはテーブル描画のオプションでページ分割の設定を有効にします。
var data = new google.visualization.arrayToDataTable([
    ['名前', '身長', '出席'],
    ['Dave',      159, true ],
    ['Peter',     185, false],
    ['John',      145, true ],
     ['Moshes',    198, true ],
     ['Karen',     169, true ],
     ['Phil',      169, false],
     ['Gori',      159, true ],
     ['Bill',      155, false],
     ['Valery',    199, true ],
     ['Joey',      187, true ],
     ['Karen',     190, true ],
     ['Jin',       169, false],
     ['Gili',      178, true ],
     ['Harry',     172, false],
     ['Handerson', 175, true ],
     ['Vornoy',    170, true ]
 ]);
 
 // ページ分割の設定
 var options = {
     page: 'enable',     // ページ分割を有効
     pageSize: 5,       // 1 ページの項目数
     pagingSymbols: {prev: '前', next: '次'}, // ラベル
 };
 options['showRowNumber'] = true;
 
 var table = new google.visualization.Table(document.getElementById('gct_table_pagenation'));
 table.draw(data, options);

関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
33位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

04月 | 2017年05月 | 06月
- 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 31 - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。