libro
www.tuyano.com
Google Apps Scriptプログラミング [中級編]

Charts Servicesによるデータテーブルとチャートの利用 (3/6)

作成:2011-09-26 08:50
更新:2011-09-26 08:50

■PieChartBuilderによる円グラフの作成

では、作成したDataTableをもとにチャートを作成しましょう。まずは比較的シンプルなものとして、「円グラフ」を作成してみます。

円グラフも、DataTableと同様、まず「PieChartBuilder」というオブジェクトを生成し、それにデータ(DataTable)を設定して、その他必要な設定などを行った後、「build」でチャートであるChartオブジェクトを生成する、といった作業を行います。


これらの主なメソッド類について整理していきましょう。これもDataTaleと同様、基本的にPieChartBuilderを返すように設計されているため、そのままメソッドチェーンで記述することができます。


・PieChartBuilderの作成
変数 = Charts.newPieChart();
PieChartBuilderオブジェクトを生成します。これで変数にPieChartBuilderが得られます。後は、このオブジェクトからメソッドを呼び出してチャートを作成します。


・DataTableの設定
変数 =【PieChartBuilder】.setDataTable(【DataTable】);
あらかじめ作成しておいたDataTableオブジェクトをチャートに設定します。これで、このデータをもとにチャートを作成するようになります。


・タイトルの設定
変数 =【PieChartBuilder】.setTitle( テキスト );
チャートのタイトルを設定します。これはチャートを表示する際に用いられます。


・チャートサイズの設定
変数 =【PieChartBuilder】.setDimensions( 横幅 , 縦幅 );
チャートのサイズを設定します。引数には、横幅と縦幅(それぞれドット数)を指定します。


・背景色の設定
【PieChartBuilder】.setBackgroundColor( 色の値 );
チャートの背景色を設定するものです。色の値は、スタイルシートで用いられるテキスト("#FF00AA"といった形式)をそのまま指定できます。


・各項目の色の設定
変数 =【PieChartBuilder】.setColors( 配列 );
チャートの各項目の色を設定します。引数には、色の値を配列にまとめたものを指定します。色の値は、setBackgroundColorと同様、スタイルシートの値を指定します。


・立体化
変数 =【PieChartBuilder】.set3D();
これを呼び出すと、チャートを立体的に表示させることができます。引数はありません。


・列の反転
変数 =【PieChartBuilder】.reverseCategories();
これを呼び出すと、列の並び順を反転させてチャートを生成します。引数はありません。


・チャートの生成
変数 =【PieChartBuilder】.build();
チャートを生成し、Chartオブジェクトを返します。これでチャートが完成です。


実際のチャート作成の例を下にあげておきます。これで簡単な円グラフが作成されます。――ただし、作成したものを「どうやって利用すればいいか?」を知らなければ、作ったオブジェクトも役立たずですね。まだこの段階では、何も画面には表示されません。ただ単に「Google Apps Scriptのサーバーにオブジェクトが生成されている(だろう)」というだけでしかありません。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

function createPieChart() {
	var data = Charts.newDataTable()
		.addColumn(Charts.ColumnType.STRING, "OS")
		.addColumn(Charts.ColumnType.NUMBER, "シェア")
		.addRow(["Windows", 47])
		.addRow(["Android", 19])
		.addRow(["iOS", 14])
		.addRow(["Mac OS", 4])
		.addRow(["Linux", 2])
		.addRow(["その他", 4])
		.build();
  
	var chart = Charts.newPieChart()
		.setDataTable(data)
		.setTitle("OSのシェア")
		.setDimensions(400, 350)
		.build();
}
※関連コンテンツ

「Google Apps Scriptプログラミング [中級編]」に戻る