Home > しらべる | つくる > Flashでレーダーチャート

Flashでレーダーチャート

  • Posted by: memorycraft
  • 2008年10月 6日 12:00
  • しらべる | つくる

Flashでレーダーチャートをつくる機会があったので、メモします。
AS2 なので、AS3にする場合は、適宜書き換えてください。



コードは概ね以下のようになっています。
上のサンプルのように動的に数値を変更する場合は、コントロールのリスナー等と組み合わせて描画毎にレーダーのムービークリップを削除するなどしてください。

//色
var RAEDER_COLOR:Number = 0x01B0F0;
//透過度
var RAEDER_PERCENT_OPACITY:Number = 40;
//最大値
var RAEDER_MAX_VALUE:Number = 10;
//データ
var RAEDER_COUNT:Number = 8;
//NumericStepperのリスナー
var stepListener:Object;


/**
 * 初期化して生成
 */
function init():Void{
	stepListener = new Object();
	stepListener.change = recreate;
	for(var i=1;i<=RAEDER_COUNT;i++){
		this["step" + i].addEventListener("change", stepListener);
	}
	createRaeder(getValues(), indicator);
}

/**
 * 再生成
 */
function recreate():Void{
	removeMovieClip(indicator.raeder);
	createRaeder(getValues(), indicator);
}

/**
 * データの取得
 * @return データ配列(レーダーの時計回り順)
 */
function getValues():Array{
	var values:Array = new Array();
	for(var i=1;i<=RAEDER_COUNT;i++){
		values.push(this["step" + i].value);
	}
	return values;
}

/**
 * レーダーの生成
 * @param vallues データ配列
 * @param target レーダーを生成ムービークリップ
 */
function createRaeder(values:Array, target:MovieClip):Void{
	
	var values:Array = getValues();
	var angle:Number = 360 / RAEDER_COUNT;
	var degrees:Array = new Array(RAEDER_COUNT);
	var points:Array = new Array(RAEDER_COUNT);
	var raeder:MovieClip = target.createEmptyMovieClip("raeder", target.getNextHighestDepth());
	var offset:Number = target._width/2;
	var scale:Number = (target._width/2) / RAEDER_MAX_VALUE;
	
	for(var i=0; i<RAEDER_COUNT; i++){
		degrees[i] = 270 + angle * i;
		points[i] = {x:Math.cos(degrees[i] * Math.PI / 180) * values[i] * scale + offset,
					 y:Math.sin(degrees[i] * Math.PI / 180) * values[i] * scale + offset};
	}
	raeder.beginFill(RAEDER_COLOR, RAEDER_PERCENT_OPACITY);
	raeder.moveTo (points[0].x, points[0].y);
	for(var j=1;j<RAEDER_COUNT;j++){
		raeder.lineTo (points[j].x, points[j].y);
	}
	raeder.endFill();
}

//初期化
init();


Trackbacks:0

TrackBack URL for this entry
http://www.memorycraft.jp/mt-tb.cgi/68
Listed below are links to weblogs that reference
Flashでレーダーチャート from メモリークラフト

Comments:0

Comment Form

Home > しらべる | つくる > Flashでレーダーチャート

ページの先頭へ戻る