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

では、作成した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のサーバーにオブジェクトが生成されている（だろう）」というだけでしかありません。

(by. SYODA-Tuyano.)

※リストが表示されない場合

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();
}