Home
Title list
RSS
AdminGoogle Chart Tools の使い方
いろんなグラフがかける Google Chart Tools の使い方について書いてみました。
- Google Chart Tools の使い方 (今回)
- 表とデータの扱い
- 棒グラフ (積み上げ棒グラフ)
- 散布図
- 折れ線グラフ、面積グラフ
- 円グラフ、計器図
- 組織図
- グラフの合成
- 動的なグラフの変更
- グラフと表の連携
- フィルタリング(Dashboard と Control)
- データロールによる特異点の表示と注釈付きタイムライン
- スプレッドシート(表計算)で作成したグラフの公開
今回は Google Chart Tools の紹介と基本的な使い方の説明です。
Google Chart Tools とは
Google Chart Tools は SVG を使ったグラフを表示するツールで、 JavaScript で記述します。<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChartSamplePie); function drawChartSamplePie() { var data = google.visualization.arrayToDataTable([ ['タスク', '時間'], ['仕事', 11], ['食事', 2], ['通勤', 2], ['TV 鑑賞', 2], ['睡眠', 7] ]); var options = { title: 'Google Chart Tools サンプル', is3D: true }; var chart = new google.visualization.PieChart(document.getElementById('gct_sample_pie')); chart.draw(data, options); } </script> <div id="gct_sample_pie" style="width: 400px;"></div>ただし、ブログ上でちょっと表示させたいといった時には、 表計算の Web アプリケーションである Google スプレッドシートを使えば、 JavaScript の知識なしでも簡単にグラフを表示させることができます。
そちらの方法に関しては以下の記事をご覧下さい。
旧機能からの変更
Google Chart は一度変更がありました。以前のものはパラメーターを GET メソッド(http のアドレス)として渡して画像でグラフを作成するツールでした。
https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|Worldこれは Image Charts という名前になっていて、まだ利用できるのですが、 Deprecated(望ましくないもの) となっています。
Image Charts は 3D など表示に関しては高機能なのですが、次のような欠点があります。
- http のアドレスで渡すため、256 文字の制限がある
- 画像なので、マウスオーバーなどに反応しない
ただし、変わったといっても Image Charts を JavaScript から作成することも可能ですし、 SVG の円グラフ(Pie chart)も 3D 表示が可能です。
また、画像と違い、 SVG の描画はブラウザーが行います。 ブラウザーはまず日本語対応しているでしょうから、グラフ中で問題なく日本語が使用可能です。
JavaScript の関数は Google Visualization(可視化) API として公開されています。
Google Chart Tools の目的も前は単にグラフを作成することでしたが、 今はデータベース等から取得したデータを可視化する というところに移ったようです。
特徴
JavaScript を使ったグラフ作成ライブラリはいろいろありますが、 他と比べた Google Chart Tools の一番の利点はインタラクティブ性の高さでしょう。マウスに対する反応だけでなく、 表との連動やフィルターなどを簡単に書くことができます。
逆に欠点は JavaScript のソースをダウンロードして使用することができないことです。 このため社内 LAN などのイントラネットの Web サービスでも、 必ず Google のサイトにアクセスしに行かなければなりません。 Google のサイトはアクセスが速いので、 インターネット上で公開する Web サービスでは問題ではありませんが、 イントラネットの場合は速度の低下の要因になる可能性があります。
また、ネットに繋がらないオフラインの環境では表示することもできません。
さらに一部の動きのあるグラフはセキュリティ上、 ローカルファイル(file://..)では動作しないようになっています。 これらの欠点はなかなか大きいのですが、 それを差し引いたとしても使用を検討する価値はあると思います。
グラフの種類
Google Chart Tools では様々なタイプのグラフが使用できます。どのようなグラフが使用出来るかは Charts Gallery を見て下さい。
Charts Gallery には出ていませんが、 それ以外にも使えるグラフが少しあります。 こちらは Code Playground や Additional Charts Gallery に載っています。
ライセンス
Google Chart Tools は商用利用も OK です。 ただ、詳細は Google Visualization API の Terms of Service ページを見てということなので、 実際に商用利用する場合は次のページを見て判断して下さい。 しかし、Map や Geochart といった図は Google Maps API を使用しています。こちらは有料、無料版があり、無料版には使用制限があリます。 Google Maps API の利用規約に従って使用して下さい。
使い方
グラフの基本的な使用法を折れ線グラフ(Line chart)を例に説明します。<html> <head> <!-- AJAX API のロード --> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Visualization API と折れ線グラフ用のパッケージのロード google.load("visualization", "1", {packages:["corechart"]}); // Google Visualization API ロード時のコールバック関数の設定 google.setOnLoadCallback(drawChart); // グラフ作成用のコールバック関数 function drawChart() { // データテーブルの作成 var data = google.visualization.arrayToDataTable([ ['年度', '売上', '費用'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); // グラフのオプションを設定 var options = { title: '会社業績' }; // LineChart のオブジェクトの作成 var chart = new google.visualization.LineChart(document.getElementById('chart_div')); // データテーブルとオプションを渡して、グラフを描画 chart.draw(data, options); } </script> </head> <body> <!-- グラフを描く div 要素 --> <div id="chart_div" style="width: 80%; height: 400px;"></div> </body> </html>グラフを表示するためには次の 3 つのものが必要です。
- Google Chart の JavaScirpt ファイルのロード指定
前述したように JavaScirpt のファイルは Google のサイトにあるものを使用します。
Google では Google Hosted Libraries という JavaScript のライブラリーを公開しているサービスがあります。 これは Google 製のライブラリーだけでなく、 JQuery、 Dojo といったよく使われているライブラリーの利用でき、様々な利点があります。- Google Hosted Libraries の紹介 | いるすの備忘録
- Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – | HTML5Experts.jp
google.load()で行うのですが、 まず、 この関数を使えるようにするファイルをロードします。<script type="text/javascript" src="http://www.google.com/jsapi"></script>
- グラフ作成のスクリプトの記述
<header> 部などにどのようなグラフにするかを記述します。
内容は次節で説明します。<script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { // グラフ作成 // : } </script> - グラフを描画する div 要素
グラフを描画するところには ID 名をつけた div 要素を置きます。
<div id="chart_div" style="width: 80%; height: 400px;"></div>
グラフのオプションで幅や高さを指定することもできるのですが、 省略時にはこの div 要素のサイズでグラフを作成します。 div 要素ではサイズ指定に 80% のような指定ができるので、 ページ幅に合わせたグラフの作成が簡単に行えます。
ただし、そのままではブラウザーのサイズ変更してもサイズは変わりません。
グラフ作成のスクリプト
グラフ作成用のスクリプトの内容について解説します。まず、グラフを作成するのに必要なパッケージをロードします。
// Visualization API と折れ線グラフ用のパッケージのロード
google.load("visualization", "1", {packages:["corechart"]});
corechart の部分がグラフの種類によって変わってきます。どのパッケージを指定するかは各グラフの説明で確認して下さい。 Chart Gallery にでている基本的なグラフはだいたい corechart です。
なお、 google.load には同じファイルをロードしない仕組みがあるので、 同一ページに複数のグラフを作成する場合などで、何度呼んでも問題ありません。
次にグラフ作成用の関数定義とその関数の登録を行います。
// Google Visualization API ロード時のコールバック関数の設定
google.setOnLoadCallback(drawChart);
// グラフ作成用のコールバック関数
function drawChart() {
// グラフ作成
}
drawChart の関数名は任意ですが、
1 ページに複数のグラフを描画する場合には名前が被らないようにして下さい。無名関数として登録することもできます。
google.setOnLoadCallback(
function() {
// グラフ作成
}
);
グラフ作成の関数
グラフ作成用の関数内ではさらに 3 つのことを行います。- データの作成
- オプションの設定
- グラフの描画
// データテーブルの作成
var data = google.visualization.arrayToDataTable([
['年度', '売上', '費用'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
// グラフのオプションを設定
var options = {
title: '会社業績'
};
// LineChart のオブジェクトの作成
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// データテーブルとオプションを渡して、グラフを描画
chart.draw(data, options);
データは google.visualization.DataTable
のオブジェクトとして作成します。サンプルでは arrayToDataTable 関数を使って二次元の配列から作成しています。
var data = google.visualization.arrayToDataTable([
['年度', '売上', '費用'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
グラフのオプションはオブジェクト(連想配列)で指定します。指定可能な要素は title のようなグラフで共通のものや 円グラフの is3D といった特定のグラフで固有のものがあります。
var options = {
title: '会社業績'
};
グラフの描画ではまず対象グラフのオブジェクトを作成します。この際、描画先の div 要素を ID 名から取得して渡します。
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
最後に作成したデータとオプションを渡して、描画を行います。
chart.draw(data, options);
グラフ作成の関数(簡易版)
グラフ作成の関数定義は Chart Wrapper を使って、もう少し簡単に書くことができます。Chart Wrapper では先ほどのグラフ作成で必要だったものをオブジェクト(連想配列)の形で用意します。
| 要素 | キー名 | 格納値 |
|---|---|---|
| グラフの種類 | chartType | グラフのクラス名 |
| データ | dataTable | データテーブルの元となる二次元配列 |
| オプション | options | オプション設定のオブジェクト |
| 対象の div 要素 | containerId | div 要素の ID 名 |
function drawChart() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataTable: [ ['年度', '売上', '費用'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ], options: {title: '会社業績'}, containerId: 'chart_div' }); wrapper.draw(); }
オプション
グラフで共通なオプションのうち、よく使いそうなものを幾つか紹介します。ただし、共通といっても 表、 円グラフといった特殊な形状のものは除きます。 詳細は各グラフの説明を見て下さい。
なお、表内で型が Object になっている項目は入れ子でオプションを指定します。
var options = { title: "グラフのタイトル", hAxis: { title: "横軸のタイトル" } }
| 名称 | 型 | デフォルト | 説明 |
|---|---|---|---|
| backgroundColor | string or object | 'white' | 背景色。 色の指定方法は HTML と同じです。 |
| colors | strings の配列 | デフォルトの配色 | 線などのグラフの要素を配列で指定します。 |
| height, width | number | グラフの格納先要素のサイズ | グラフの高さ、幅 |
| legend | Object | null | 判例 |
| .position | string | 'right' | 判例の位置
|
| title | string | 非表示 | タイトルの文字列 |
| hAxis, vAxis | object または object の配列 | null | 横軸、縦軸(後述) |
hAxis, vAxis でグラフの横(メイン)軸、縦軸の設定を行います。 各軸の設定項目はほぼ同じものです。
| 名称 | 型 | デフォルト | 説明 |
|---|---|---|---|
| baseline | number | 自動 |
グラフの補助線の表示する数を指定します。 補助線の詳細は gridlines で指定し、 gridlines の間隔で丸められます。 ただし、 横軸の場合、データを数値として扱っていないと補助線は表示されません。 折れ線グラフ、面積グラフ |
| baselineColor | string | 'black' |
補助線の背景色。色の指定方法は HTML と同じです。 'none' を指定すると補助線は非表示となります。 |
| format | string | 自動 |
軸の値のラベルを表示する際のフォーマット。 数値または日時の ICU パターンで指定します。 例えば、 10, 7.5, 0.5 の値で {format:'#,###%'} と指定すると、
"1,000%", "750%", and "50%" と表示されます。日付の場合、 {format:'y 年 MM 月 dd 日(E)'} と指定すると、
"2013 年 01 月 27 日(日)" といった表示になります。
|
| gridlines | Object | null | 補助線。 |
| .color | string | '#CCC' | 補助線の色を指定します。 |
| .count | number | 5 | グラフ内の補助線の数を指定します。(最小は 2) |
| minorGridlines | Object | null | より細かいサブ補助線。 |
| .color | string | gridlines と 背景色の混合 | サブ補助線の色 |
| .count | number | 0 | 補助線間に表示するサブ補助線の数を指定します。 |
| logScale | boolean | false | 軸の表示を Log スケールで表示します。 等比級数的に増加するデータの表示などで使用します。 |
| title | string | null | 軸のタイトル。 |
| slantedText | boolean | 自動 | (横軸用) true の場合には値のラベルが入りきらない場合に、角度を付けて表示します。 false では上下に段を分けて表示します。 |
| viewWindow | Object | null | グラフの表示領域を指定します |
| .max | number | 自動 | 表示領域の最大値 |
| .min | number | 自動 | 表示領域の最小値 |
スポンサーサイト
- 2012-12-07
- | コメント(6)
- | トラックバック(1)
- | Edit
- |
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 つの方法があります。
- 空のオブジェクトを作成し、addColumn, addRows などでデータを格納
- JSON 形式で定義したデータから作成
- 2 次元配列から作成
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 のインスタンス作成時に渡すオブジェクトで表示形式を指定します。
prefix や suffix といった要素もあるのですが、 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(開始値, 終了値, 文字色, 開始背景色, 終了背景色)
ちなみに段階的に文字色(前景色)を指定する関数はありません。
ページ分割
ページ分割(ページネーション, ページング) というのは、データがたくさんある場合に 一定数づつ分割して表示することを言います。個人的には一度に表示してスクロールで見る方が好きなのですが、 海外ではページ分割して表示するのが主流っぽいです。
ページ分割するにはテーブル描画のオプションでページ分割の設定を有効にします。
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);
- 2012-12-12
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
Google Chart Tools - 棒グラフ
Google Chart Tools でよく使いそうなグラフをいくつか紹介していきたいと思います。
今回は棒グラフです。
グラフの基本的な記述方法ついては初回の記事をご覧ください。
Column Chart
棒グラフには Column Chart を使用します。<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback( function() { var data = google.visualization.arrayToDataTable([ [ '', '売上高', '営業利益', '経常利益'], ['2004 年', 1000, 400, 380], ['2005 年', 1170, 460, 400], ['2006 年', 660, 1120, 900], ['2007 年', 1030, 540, 480], ['2008 年', 1350, 750, 800] ]); var options = { title: '会社業績', hAxis: {title: '年度'} }; var chart = new google.visualization.ColumnChart(document.getElementById('gct_sample_column')); chart.draw(data, options); } ); </script> <div id="gct_sample_column" style="width:80%; height:250pt" ></div>
データ形式
棒グラフでは DataTable のデータを次のように使います。
先頭を除く各列がデータグループとなり、 先頭列がメインの軸(X 軸)の項目名となります。
Bar Chart
Bar Chart は横バージョンの棒グラフです。 向きの違い以外は Column Chart とほとんど同じです。var data = google.visualization.arrayToDataTable([ [ '', '売上高', '営業利益', '経常利益'], ['2004 年', 1000, 400, 380], ['2005 年', 1170, 460, 400], ['2006 年', 660, 1120, 900], ['2007 年', 1030, 540, 480], ['2008 年', 1350, 750, 800] ]); var options = { title: '会社業績', vAxis: {title: '年度'} }; var chart = new google.visualization.BarChart(document.getElementById('gct_sample_bar')); chart.draw(data, options);
積み上げ棒グラフ
Column Chart および Bar Chart はオプションの変更によって簡単に積み上げ棒グラフの形式に変えることができます。積み上げ棒グラフにするには isStacked を true に設定します。
var options = {
title: '会社業績',
hAxis: {title: '年度'},
isStacked: true
};
- 2012-12-14
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
