五角形グラフをFLASHで生成

慣れると簡単、多角形グラフ描画のサンプル。

オレンジ色のボタンでそれぞれ適当な点数分布を表示することができます。

メインのコードは下記。

//角度設定
var r1:Number = 270;
var r2:Number = 342;
var r3:Number = 54;
var r4:Number = 126;
var r5:Number = 198;
//グラフ描画用ムービークリップ
var mc1:MovieClip
var mc2:MovieClip
function setGraph(p1,p2,p3,p4,p5) {
	//グラフ分布図形
	mc1.removeMovieClip();//前回の描画を削除
	mc1 = createEmptyMovieClip("graph1", getNextHighestDepth());//新規mcを作成
	with(mc1) {
		beginFill (0xFFCCCC, 50);//塗りの色と透明度
		lineStyle (1, 0xFF9999, 50);//線の太さと色と透明度
		moveTo (Math.cos(r1*Math.PI/180)*p1, Math.sin(r1*Math.PI/180)*p1);
		lineTo (Math.cos(r2*Math.PI/180)*p2, Math.sin(r2*Math.PI/180)*p2);
		lineTo (Math.cos(r3*Math.PI/180)*p3, Math.sin(r3*Math.PI/180)*p3);
		lineTo (Math.cos(r4*Math.PI/180)*p4, Math.sin(r4*Math.PI/180)*p4);
		lineTo (Math.cos(r5*Math.PI/180)*p5, Math.sin(r5*Math.PI/180)*p5);
		endFill ();
	}
	//グラフ外形ライン
	mc2.removeMovieClip();//前回の描画を削除
	mc2=this.createEmptyMovieClip("graph2", getNextHighestDepth());//新規mcを作成
	with(mc2) {
		beginFill (0xFF9999, 0);//塗りの色と透明度
		lineStyle (1, 0x999999, 100);//線の太さと色と透明度
		moveTo (Math.cos(r1*Math.PI/180)*100, Math.sin(r1*Math.PI/180)*100);
		lineTo (Math.cos(r2*Math.PI/180)*100, Math.sin(r2*Math.PI/180)*100);
		lineTo (Math.cos(r3*Math.PI/180)*100, Math.sin(r3*Math.PI/180)*100);
		lineTo (Math.cos(r4*Math.PI/180)*100, Math.sin(r4*Math.PI/180)*100);
		lineTo (Math.cos(r5*Math.PI/180)*100, Math.sin(r5*Math.PI/180)*100);
		endFill ();
	}
}

角度設定の設定を増やしていけば六角形などの図形でも対応できるはず。計算はすごく単純で各図形の点を三角関数で座標を求めるだけ。

簡単に解説すると、

この図のように、角度が分かれば、sinとcosで対角線の座標を求めることが可能。

[X座標] = Math.cos([角度]*Math.PI/180*[長さ])
[Y座標] = Math.sin([角度]*Math.PI/180*[長さ])
※[長さ]は三角形の対角線の長さ。

これを五角形のグラフであれば、5つの角度を別々に計算し座標を求める。あとは、FLASHでその座標通りに描画を行う。

ちなみに、FLASHの場合、横軸から右回りに角度が増えていくので、ちょっと注意。

もちろん、手を加えていけばアニメーションしながらのグラフ表示も可能。

XMLファイルなどで数値を外部ファイル化すれば、状況に応じてグラフの表示が変わるようなものも作れますね。

レッツ統計ページ。

⇒サンプルファイル
※FLASH MX 2004 ドキュメントで保存

この記事をブックマークしておく