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