AS3で集合棒グラフ

棒グラフの本数や項目数に柔軟に対応するために全部スクリプトで書き切ります。この例では棒グラフ1本に項目が4つ入ります。

var arr1:Array=new Array(10,20,30,40,50);
var arr2:Array=new Array(12,22,15,20,10);
var arr3:Array=new Array(15,12,25,25,15);
var arr4:Array=new Array(2,25,35,2,12);
var graph_list:Array=new Array();
var graph:Sprite;

function drawGraph(arr1:Array, arr2:Array, arr3:Array, arr4:Array){
	for(var i:Number = 0 ; i < arr1.length ; i++){
		graph=new Sprite();

		//--1番目のグラフの描画
		graph.graphics.beginFill(0xe533ff);
		graph.graphics.drawRect(0,0,10,arr1[i]*-1);

		//--2番目のグラフを描画
		graph.graphics.beginFill(0x4dd11c);
		graph.graphics.drawRect(0,arr1[i]*-1,10,arr2[i]*-1);

		//--3番目のグラフを描画
		graph.graphics.beginFill(0x7a165b);
		graph.graphics.drawRect(0, arr1[i]*-1+arr2[i]*-1,10, arr3[i]*-1);

		//--4番目のグラフを描画
		graph.graphics.beginFill(0x03ff98);
		graph.graphics.drawRect(0, arr1[i]*-1+arr2[i]*-1+arr3[i]*-1, 10, arr1[i]*-1);

		graph.graphics.endFill();
		
		graph_list.push(graph);
		graph_list[i].x=50+(graph_list[i].width+10)*(i);
		graph_list[i].y=350;//表示位置
		addChild(graph_list[i]);
	}
}

drawGraph(arr1, arr2, arr3, arr4);

実行結果。

配列は適当な数字を入れています。エクセルやXML、CSVから引っ張ってくる場合は必要に応じてパースして配列を作るとよいと思います。

var arr1:Array=new Array(10,20,30,40,50);
var arr2:Array=new Array(12,22,15,20,10);
var arr3:Array=new Array(15,12,25,25,15);
var arr4:Array=new Array(2,25,35,2,12);

Sprite矩形の高さにグラフの値として配列の値を入れています。-1をかけているのは棒グラフを上に延ばすためです。このあたりはグラフの表示内容に応じて変更していけばよいと思います。

graph.graphics.drawRect(0,0,10,arr1[i]*-1);

これで数値から動的に棒グラフが描画できるようになりますね。