FLEX-WEB - Sprite 를 이용한 차트 만들기

 

Sprite 를 이용한 차트 만들기


{

• Sprite 를 이용해서 막무가내 기본 차트를 만들고 있음....
• 아직은 계속 변신 중 입니다.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();" layout="absolute" xmlns:DNC="common.datamation.chart.*" fontSize="12" fontFamily="나눔고딕">

<mx:Script>

<![CDATA[

import mx.controls.Label;

import mx.collections.ArrayCollection;

import mx.controls.Text;

import flash.utils.getTimer;

import mx.controls.Alert;

import mx.effects.easing.Linear;

import mx.containers.Canvas;

//private var aaa:Graphics = new Graphics();

private const LEFT_SIZE:int = 20;

private var can:Canvas = new Canvas();

private var tryFill:Canvas = new Canvas();

[Bindable]

private var expensesAC:ArrayCollection = new ArrayCollection( [

{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },

{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },

{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },

{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },

{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 },

{ Month: "June", Profit: 2600, Expenses: 584, Amount: 800 },

{ Month: "Agust", Profit: 1400, Expenses: 600, Amount: 200 },

{ Month: "June", Profit: 2600, Expenses: 584, Amount: 1900 },

{ Month: "Jan", Profit: 2000, Expenses: 1600, Amount: 450 } ]

);

private function init():void{

can.graphics.clear();

// this.graphics.beginFill(0xFFFF00);

can.graphics.lineStyle(2, 0xFFFFFF);

can.graphics.moveTo(0+LEFT_SIZE, 0+LEFT_SIZE );

can.graphics.lineTo(0+LEFT_SIZE, this.height-LEFT_SIZE);

can.graphics.moveTo(0+LEFT_SIZE, this.height-LEFT_SIZE);

can.graphics.lineTo(this.width-LEFT_SIZE, this.height-LEFT_SIZE);

tryFill.graphics.lineStyle(1, 0xFFFFFF);

var totalAmount:Number = 0;

for(var j:int=0; j < expensesAC.length; j++){

totalAmount = totalAmount+expensesAC[j]["Amount"];

}

var myYpoint:int = 0;

for(var i:int=0; i < expensesAC.length; i++){

var color:uint = uint("0xFF"+i+"0F"+i);

var bottomLBL:Label = new Label();

var valueLBL:Text = new Text();

valueLBL.name = "txt"+i;

trace("txt ::: "+i);

var myAmount:Number = expensesAC[i]["Amount"] / totalAmount * 100;

trace("myAmount ["+myAmount*10+"]");

bottomLBL.text = expensesAC[i]["Month"].toString();

bottomLBL.x = LEFT_SIZE+30+(i*80);

bottomLBL.y = this.height-LEFT_SIZE;

valueLBL.text = expensesAC[i]["Amount"];

valueLBL.x = LEFT_SIZE+30+(i*80);

valueLBL.y = this.height-LEFT_SIZE+(-myAmount*10)-20;

trace("valueLBL ["+valueLBL.x+"]");

tryFill.graphics.beginFill(color);

tryFill.graphics.drawRect(LEFT_SIZE+20+(i*80), this.height-LEFT_SIZE, 50,-myAmount*10);//-((i*100)+50));

trace("myYpoint ["+myYpoint+"]");

tryFill.graphics.endFill();

tryFill.addEventListener(MouseEvent.MOUSE_OVER, myName);

var msg:Text = new Text();

msg.text = "아 어렵다";

msg.setStyle("fontSize","45");

msg.setStyle("color","#FFFFFF");

msg.setStyle("fontFamily","Gulim");

msg.graphics.curveTo(this.width/2,this.height/2,50,50);

msg.x = (this.width/2)*1.5;

msg.y = LEFT_SIZE;

this.addChild(msg);

this.addChild(tryFill);

this.addChild(bottomLBL);

this.addChild(can);

this.addChild(valueLBL);

trace("txt ::: "+i);

}

for(i=0; i < expensesAC.length; i++){

this.setChildIndex(this.getChildByName("txt"+i), this.numChildren -1);

}

}

private function myName(e:MouseEvent):void{

tryFill.toolTip = "흐잉 ━┏";

}

]]>

</mx:Script>

</mx:Application>

}