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

チャート利用の基本がわかったら、その他の一般的なデータ表示用チャートとして「棒グラフ（縦横）」「面グラフ」「折れ線グラフ」といったものについて説明していきましょう。これらは、いずれもだいたい同じような働きを持っています。円グラフと違い、複数列のデータを管理し、1つのグラフ内にそれらを同時に表示することができます。


・AreaChartBuilderの生成

変数 =Charts.newAreaChart();

・BarChartBuilderの生成

変数 =Charts.newBarChart();

・ColumnChartBuilderの生成

変数 =Charts.newColumnChart();

・LineChartBuilderの生成

変数 =Charts.newLineChart();

作成されたオブジェクトのメソッドを呼び出してチャートを設定していくという流れは、PieChartBuilderと同じです。また「setDataTable」でDataTableを設定し、「build」でビルドする、とういようなPieChartBuilderにあったメソッド類も、そのままこれらのオブジェクトに用意されています。

この他に、これらのオブジェクトには更に細々としたメソッドが用意されています。それらについても整理しておきましょう。


・チャート範囲の設定

変数 =【オブジェクト】.setRange( 最小値 , 最大値 );

チャート化する際の最小値と最大値をそれぞれ設定します。引数はそれぞれの数値を渡します。


・スタックの設定

変数 =【オブジェクト】.setStacked();

各列の値を別々ではなく積み上げる形で表示します。引数はなく、これを呼び出せば自動的に積み上げ式に変わります。


・バー方向の逆転

変数 =【オブジェクト】.reverseDirection();

BarChartBuilderに用意されています。バーの方向を反転し、右側のラインを基準に、左へと伸びるようにします。


・点の形の設定

変数 =【オブジェクト】.setPointStyle(【PointStyle】);

AreaChartBuilderとLineChartBuilderに用意されています。線グラフの各位置の点の表示スタイルを設定します。引数には、PointStyleオブジェクトに用意されている以下のプロパティのいずれかを指定します。

NONE――なし
TINY――小さい点
MEDIUM――普通サイズの点
LARGE――大きい点
HUGE――巨大な点


実際に試してみたところ、setPointStyleはまだPointStyleが正しく実装されていないようでうまく動きませんでした。また、setStackedでスタック表示をしている場合、setRangeによる範囲指定は最大値のみが設定され、最小値は無視されます。

円グラフと異なり、複数データのスタック表示や、グラフの範囲指定などが用意されており、より細かくグラフを制御できることがわかるでしょう。では、以下に簡単な利用例を挙げておきます。既にチャートの基本がわかっていれば、チャートの種類が違ってもだいたい使いこなせるはずです。

(by. SYODA-Tuyano.)

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

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

function doGet() {
	var data = Charts.newDataTable()
		.addColumn(Charts.ColumnType.STRING, "売上")
		.addColumn(Charts.ColumnType.NUMBER, "Android")
		.addColumn(Charts.ColumnType.NUMBER, "iOS")
		.addColumn(Charts.ColumnType.NUMBER, "Windows Phone")
		.addRow(["第1期", 197, 121, 64])
		.addRow(["第2期", 225, 138, 75])
		.addRow(["第3期", 270, 216, 81])
		.addRow(["第1期4", 350, 259, 97])
		.build();
  
	var chart = Charts.newAreaChart()
		.setDataTable(data)
		.setTitle("携帯端末販売")
		.setDimensions(400, 350)
		.setRange(0, 750)
		.setStacked()
		.setColors(["#FF9999","#99FF99","#9999FF"])
		.build();

	var uiApp = UiApp.createApplication().setTitle("サンプルチャート");
	uiApp.add(chart);
	return uiApp; 
}