Here is the code that moves labels too. Also there are several optimization things done. Note how it deals with label positioning.
package
{
import com.greensock.TweenMax;
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.events.Event;
import flash.filters.DropShadowFilter;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
public class PieChart extends MovieClip
{
private var piechart:MovieClip = new MovieClip();
private var segments:Array;
private var titles:Array = new Array();
private var values:Array = new Array();
private var xmlFile:XML;
private var pie:Number;
private var radiansSoFar:Number = 0;
private var urlLoader:URLLoader = new URLLoader();
private var format:TextFormat = new TextFormat();
private var colors:Array;
private var radius:Number = 200;
private var labelDistance:Number = 25;
public function PieChart()
{
/*Text Format*/
format.color = 132744;
format.align = "left";
format.font = "Century Gothic";
format.size = 11;
loadXML();
}
private function loadXML(file:String = "pie.xml"):void
{
// event listener should be added BEFORE load is called
urlLoader.addEventListener(Event.COMPLETE, parseXML);
urlLoader.load(new URLRequest(file));
}
private function parseXML(e:Event):void
{
xmlFile = new XML(e.target.data);
pie = xmlFile.children().length;
buildPieChart(xmlFile);
}
private function buildPieChart(xmlData:XML):void
{
var titleList:XMLList = xmlData.item.title;
var valueList:XMLList = xmlData.item.value;
for each (var titleElement:XML in titleList)
{
titles.push(titleElement);
}
for each (var valueElement:XML in valueList)
{
values.push(valueElement);
}
colors = new Array();
colors.push(0xFF0000);
colors.push(0xFFFF00);
colors.push(0x00FF00);
colors.push(0x0000FF);
colors.push(0xFF0080);
colors.push(0x808000);
colors.push(0xFF8000);
colors.push(0x000033);
colors.push(0x663366);
colors.push(0x333300);
colors.push(0x330033);
var radians:Array = new Array();
var totalValue:Number = 0;
trace(values.length);
for(var i:int = 0; i < values.length; i++)
{
totalValue = totalValue + Number(values);
}
for(i = 0; i < values.length; i++)
{
radians.push(Number(values) / totalValue * 2);
}
drawlines(250, 250, radius, radians);
}
private function drawlines(centerx:Number, centery:Number, radius:Number, radians:Array):void
{
var colorkey:Number = 0;
var coloralpha:Number = 1;
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 2;
shadow.angle = 45;
shadow.color = 0x000000;
var gr:Graphics = piechart.graphics;
var segment:MovieClip;
segments = [];
var rads:Number;
for(var i:int = 0; i < radians.length; i++)
{
segment = new MovieClip();
segment.midPoint = radiansSoFar + radians / 2;
gr = segment.graphics;
gr.beginFill(colors[colorkey], coloralpha);
gr.moveTo(0, 0);
rads = radiansSoFar * Math.PI;
gr.lineTo(Math.sin(rads) * radius, Math.cos(rads) * radius);
for(var n:Number = 0; n <= radians; n += .0001)
{
rads = (radiansSoFar + n) * Math.PI;
gr.lineTo(Math.sin(rads) * radius, Math.cos(rads) * radius);
}
gr.lineTo(0,0);
gr.endFill();
radiansSoFar += radians;
segment.label = addLabel(radians, titles, radiansSoFar, radius, colors[colorkey], coloralpha);
// original label positions
segment.labelX = segment.label.x;
segment.labelY = segment.label.y;
if (colorkey == colors.length - 1)
{
colorkey = 0;
coloralpha -= .25;
}
else
{
colorkey += 1;
}
segments.push(segment);
piechart.addChild(segment);
}
gr = piechart.graphics;
// just to indicate center
gr.beginFill(0x000000);
gr.drawCircle(0, 0, 10);
addChildAt(piechart, 0);
piechart.x = stage.stageWidth / 2;
piechart.y = stage.stageHeight / 2;
piechart.filters = [shadow];
animateSegements();
}
private function animateSegements():void {
var distance:Number = 200;
var label:TextField;
var mprads:Number;
for each(var segment:MovieClip in segments) {
mprads = segment.midPoint * Math.PI;
segment.x = Math.sin(mprads) * distance;
segment.y = Math.cos(mprads) * distance;
label = segment.label;
label.x = Math.sin(mprads) * (distance + labelDistance + radius) - label.width / 2;
label.y = Math.cos(mprads) * (distance + labelDistance + radius) - label.height / 2;
piechart.addChild(label);
TweenMax.to(segment, 2, { x:0, y:0, onComplete: moveOne } );
TweenMax.to(label, 2, { x: segment.labelX, y: segment.labelY, onComplete: moveOne } );
}
}
private function moveOne():void {
var distance:Number = 100;
var segment:MovieClip = segments[1];
var label:TextField = segment.label;
var mprads:Number = segment.midPoint * Math.PI;
TweenMax.to(segment, 1, { x:Math.sin(mprads) * distance, y:Math.cos(mprads) * distance, onComplete: moveOne } );
TweenMax.to(label, 1, { x:Math.sin(mprads) * (distance + labelDistance + radius) - label.width / 2, y: Math.cos(mprads) * (distance + labelDistance + radius) - label.height / 2 } );
}
private function addLabel(radians:Number, itemtitle:String, radiansSoFar:Number, radius:Number, color:uint, coloralpha:Number):TextField
{
var format:TextFormat = new TextFormat();
format.align = "left";
format.font = "Century Gothic";
format.size = 11;
var label:TextField = new TextField();
label.autoSize = "left";
label.antiAliasType = "advanced";
label.defaultTextFormat = format;
label.text = itemtitle + "( " + Math.round((radians / 2 * 100)).toString() + "%)";
var textRadians:Number = radiansSoFar - (radians / 2);
label.x = Math.sin(textRadians * Math.PI) * (radius + labelDistance) - label.width / 2;
label.y = Math.cos(textRadians * Math.PI) * (radius + labelDistance) - label.height / 2;
piechart.addChild(label);
return label;
}
}
}
1 Correct answer
15
Replies
AdChoices