Main application file:
flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955"
minHeight="600"
xmlns:component="com.component.*"
pageTitle="2008北京奥运会奖牌" viewSourceURL="srcview/index.html">
height="300"
verticalTotalValue="60">
height="267">
-->
chart:
/*************************************************
****
**** 黄记新,2010-10-14,下午04:58:40
****
************************************************/
// .==. .==.
// //`^\\ //^`\\
// // ^ ^\\ //^ ^^\\
// //^ ^^ ^\(\__/)/^ ^^ \\
// //^ ^^ ^^ /6 6\ ^ ^^ ^\\
// //^ ^^ ^^ /( .. )\^ ^ ^ ^\\
// // ^^ ^^ /\| V""V |/\^ ^ ^ \\
// // ^^ ^/\/ / `~~` \ \/\^ ^ \\
package com.component
{
import flash.display.Graphics;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BevelFilter;
import flash.filters.DropShadowFilter;
import flash.utils.Dictionary;
import mx.core.IFactory;
import mx.core.UIComponent;
import spark.components.Group;
import spark.components.Label;
public class ColumnChart extends Group
{
//数据源
[Bindable]
private var _dataProvider:Object;
protected var dataProviderChanged:Boolean;
//渲染器
private var _itemRenderer:IFactory;
//滤镜
private var dropShadowFilter:DropShadowFilter=new DropShadowFilter();
private var bevelFilter:BevelFilter=new BevelFilter();
private var itemToRender:Dictionary;
private var renderToItem:Dictionary;
private var objectsArray:Array=[];
private var colorArray:Array=[];
private var labelArray:Array=[];
private var _verticalTotalValue:Number;
//滤镜
private var dropShadowFil:DropShadowFilter=new DropShadowFilter();
private var lineContainer:Group;
private var lineColor:uint=Math.random()*0xffffff;
public function ColumnChart()
{
//TODO: implement function
super();
itemToRender=new Dictionary(true);
renderToItem=new Dictionary(true);
this.filters=[dropShadowFil];
addEventListener(MouseEvent.ROLL_OVER, onRollOver);
addEventListener(MouseEvent.ROLL_OUT, onRollOut);
}
public function get verticalTotalValue():Number
{
return _verticalTotalValue;
}
public function set verticalTotalValue(value:Number):void
{
_verticalTotalValue=value;
}
/*************************************************
****
**** setter和 getter函数
****
************************************************/
public function get itemRenderer():IFactory
{
return _itemRenderer;
}
public function set itemRenderer(value:IFactory):void
{
_itemRenderer=value;
}
public function get dataProvider():Object
{
return _dataProvider;
}
public function set dataProvider(value:Object):void
{
/*if (_dataProvider == value)
{
return;
}*/
_dataProvider=value;
dataProviderChanged=true;
invalidateProperties();
}
/**
* 创建实例
* @param object
* @return
*/
protected function createItemInstance(object:Object):UIComponent
{
var render:UIComponent=itemRenderer.newInstance() as UIComponent;
if (render is IColumnItemRender)
{
IColumnItemRender(render).data=object;
}
return render;
}
/**
* 移除实例;
* @param object
*/
protected function removeItemInstance(object:Object):void
{
var render:UIComponent=itemToRender[object] as UIComponent;
if (render && this.contains(render))
{
this.removeElement(render);
itemToRender[object]=null;
renderToItem[render]=null;
}
}
/**
* 移除所有实例;
* @param array
*/
protected function removeAllItem(array:Array):void
{
if (array.length == 0)
return;
for (var i:int=0; i height / verticalTotalValue;
trace(totalValueHeight);
var aveHeigh:Number=verticalTotalValue / 20;
//对一个孩子产生随机颜色
generateColor(colorArray, arrCol.children()[0]);
for (var j:int=0; j height);
g.lineTo(Group(event.currentTarget).mouseX, 0);*/
}
/**
* 响应条目项点击
* @param event
*/
private function onClick(event:MouseEvent):void
{
var render:UIComponent=event.currentTarget as UIComponent;
var object:Object=getItem(event.currentTarget as UIComponent);
if (!object)
{
return;
}
//派发条目点击事件
object.render=event.currentTarget as UIComponent;
dispatchEvent(new ColumnChartEvent(ColumnChartEvent.ITEM_CLICK, object));
}
private function getItem(render:UIComponent):Object
{
return renderToItem[render] as Object;
}
private function getRender(object:Object):UIComponent
{
return itemToRender[object] as UIComponent;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var totalValueHeight:Number=height / verticalTotalValue;
var averageHeigh:Number=verticalTotalValue / 10;
this.graphics.lineStyle(1, 0x123456);
this.graphics.moveTo(-5, height);
this.graphics.lineTo(-5, height - verticalTotalValue * totalValueHeight);
/*this.graphics.moveTo(-5, height+1);
this.graphics.lineTo(width, height+1);*/
for (var i:int=0; i height - averageHeigh * i * totalValueHeight - label.height);
graphics.moveTo(label.x, label.y + label.height);
graphics.lineTo(-5, label.y + label.height);
}
/*for (var i:int=0; i
flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
implements="com.component.IColumnItemRender">
height - Number(xml.@data), 10, Number(xml.@data), Math.random() * 0xffffff, false);
var totalWidth:Number=0;
for (var i:int=0; i height;
object.width=20;
object.height=0;
object.color=myxml.children()[i].@color;
Tweener.addTween(object, {y: height - Number(myxml.children()[i].@data) * this.data.totalValueHeight, height: Number(myxml.children()[i].@data) * this.data.totalValueHeight, time: 2, onUpdate: onUpdateHandler, onUpdateParams: [graphics, object]});
trace(Number(myxml.children()[i].@data) * this.data.totalValueHeight);
/* drawColumn(graphics,
data.position * 100 + i * 25,
this.height - Number(myxml.children()[i].@data)*this.data.totalV alueHeight,
20, Number(myxml.children()[i].@data*this.data.totalVa lueHeight),
myxml.children()[i].@color,
true, 0xffffff, 0.8, 0.7); */
var label:Label=labelArray[i] as Label;
label.text=String(myxml.children()[i].@label);
label.move(data.position * 100 + i * 25, height + label.height);
var dataLabel:Label=labelDataArray[i] as Label;
dataLabel.text=String(myxml.children()[i].@data);
dataLabel.alpha=0;
dataLabel.move(data.position * 100 + i * 25, this.height - Number(myxml.children()[i].@data * this.data.totalValueHeight) - dataLabel.height);
Tweener.addTween(dataLabel, {alpha: 1, time: 2});
}
totalWidth=data.position * 80 + myxml.children().length() * 10;
var xLabel:Number=data.position * 100 + (25 * (myxml.children().length()) - myLabel.width) / 2;
var yLabel:Number=height + myLabel.height * 7;
myLabel.move(xLabel, yLabel);
var p1:Point=new Point(data.position * 100 - 5, height + myLabel.height);
var p2:Point=new Point(data.position * 100 - 5, height + myLabel.height * 5);
var p3:Point=new Point(data.position * 100 + 25 * myxml.children().length() + 5, height + myLabel.height * 5);
var p4:Point=new Point(data.position * 100 + 25 * myxml.children().length() + 5, height + myLabel.height);
var p5:Point=new Point(p2.x / 2 + p3.x / 2, height + myLabel.height * 7);
drawLines(this.graphics, p1, p2, p3, p4, p5, 0x123456);
}
//Computer the total data;
private function roopXml(xml:XML):XML
{
if (!xml)
{
return null;
}
/* var data:Number=0; */
for each (var tempxml:XML in xml.children())
{
//做数据相对转换
/* var tempData:Number=Number(tempxml.@data);
tempData*=this.data.totalValueHeight;
tempxml.@data=tempData; */
/* trace(this.data.totalValueHeight*Number(tempxml.@data));
tempxml.@data=this.data.totalValueHeight*Number(te mpxml.@data); */
//获得总数据;
/* data+=Number(tempxml.@data);
xml.@data=data;
roopXml(tempxml); */
}
return xml;
}
protected function drawColumn(graphics:Graphics, x:Number, y:Number, width:Number, height:Number, color:uint=0x000000, drawLine:Boolean=false, lineColor:uint=0x000000, alpha:Number=1, lineAlpha:Number=0.7):void
{
var xw:Number=x + width;
var yh:Number=y + height;
if (drawLine)
{
graphics.lineStyle(1, lineColor, lineAlpha, true);
}
else
{
graphics.lineStyle(1, color, lineAlpha, true);
}
graphics.beginFill(color, alpha);
graphics.moveTo(x, y);
graphics.lineTo(xw, y);
graphics.lineTo(xw, yh);
graphics.lineTo(x, yh);
graphics.endFill();
}
]]>
/*************************************************
****
**** 黄记新,2010-10-12,下午04:33:13
****
************************************************/
package com.component
{
public interface IColumnItemRender
{
function get data():Object;
function set data(object:Object):void;
}
}
flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955"
minHeight="600"
xmlns:component="com.component.*"
pageTitle="2008北京奥运会奖牌" viewSourceURL="srcview/index.html">
height="300"
verticalTotalValue="60">
height="267">
-->
chart:
/*************************************************
****
**** 黄记新,2010-10-14,下午04:58:40
****
************************************************/
// .==. .==.
// //`^\\ //^`\\
// // ^ ^\\ //^ ^^\\
// //^ ^^ ^\(\__/)/^ ^^ \\
// //^ ^^ ^^ /6 6\ ^ ^^ ^\\
// //^ ^^ ^^ /( .. )\^ ^ ^ ^\\
// // ^^ ^^ /\| V""V |/\^ ^ ^ \\
// // ^^ ^/\/ / `~~` \ \/\^ ^ \\
package com.component
{
import flash.display.Graphics;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BevelFilter;
import flash.filters.DropShadowFilter;
import flash.utils.Dictionary;
import mx.core.IFactory;
import mx.core.UIComponent;
import spark.components.Group;
import spark.components.Label;
public class ColumnChart extends Group
{
//数据源
[Bindable]
private var _dataProvider:Object;
protected var dataProviderChanged:Boolean;
//渲染器
private var _itemRenderer:IFactory;
//滤镜
private var dropShadowFilter:DropShadowFilter=new DropShadowFilter();
private var bevelFilter:BevelFilter=new BevelFilter();
private var itemToRender:Dictionary;
private var renderToItem:Dictionary;
private var objectsArray:Array=[];
private var colorArray:Array=[];
private var labelArray:Array=[];
private var _verticalTotalValue:Number;
//滤镜
private var dropShadowFil:DropShadowFilter=new DropShadowFilter();
private var lineContainer:Group;
private var lineColor:uint=Math.random()*0xffffff;
public function ColumnChart()
{
//TODO: implement function
super();
itemToRender=new Dictionary(true);
renderToItem=new Dictionary(true);
this.filters=[dropShadowFil];
addEventListener(MouseEvent.ROLL_OVER, onRollOver);
addEventListener(MouseEvent.ROLL_OUT, onRollOut);
}
public function get verticalTotalValue():Number
{
return _verticalTotalValue;
}
public function set verticalTotalValue(value:Number):void
{
_verticalTotalValue=value;
}
/*************************************************
****
**** setter和 getter函数
****
************************************************/
public function get itemRenderer():IFactory
{
return _itemRenderer;
}
public function set itemRenderer(value:IFactory):void
{
_itemRenderer=value;
}
public function get dataProvider():Object
{
return _dataProvider;
}
public function set dataProvider(value:Object):void
{
/*if (_dataProvider == value)
{
return;
}*/
_dataProvider=value;
dataProviderChanged=true;
invalidateProperties();
}
/**
* 创建实例
* @param object
* @return
*/
protected function createItemInstance(object:Object):UIComponent
{
var render:UIComponent=itemRenderer.newInstance() as UIComponent;
if (render is IColumnItemRender)
{
IColumnItemRender(render).data=object;
}
return render;
}
/**
* 移除实例;
* @param object
*/
protected function removeItemInstance(object:Object):void
{
var render:UIComponent=itemToRender[object] as UIComponent;
if (render && this.contains(render))
{
this.removeElement(render);
itemToRender[object]=null;
renderToItem[render]=null;
}
}
/**
* 移除所有实例;
* @param array
*/
protected function removeAllItem(array:Array):void
{
if (array.length == 0)
return;
for (var i:int=0; i height / verticalTotalValue;
trace(totalValueHeight);
var aveHeigh:Number=verticalTotalValue / 20;
//对一个孩子产生随机颜色
generateColor(colorArray, arrCol.children()[0]);
for (var j:int=0; j height);
g.lineTo(Group(event.currentTarget).mouseX, 0);*/
}
/**
* 响应条目项点击
* @param event
*/
private function onClick(event:MouseEvent):void
{
var render:UIComponent=event.currentTarget as UIComponent;
var object:Object=getItem(event.currentTarget as UIComponent);
if (!object)
{
return;
}
//派发条目点击事件
object.render=event.currentTarget as UIComponent;
dispatchEvent(new ColumnChartEvent(ColumnChartEvent.ITEM_CLICK, object));
}
private function getItem(render:UIComponent):Object
{
return renderToItem[render] as Object;
}
private function getRender(object:Object):UIComponent
{
return itemToRender[object] as UIComponent;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var totalValueHeight:Number=height / verticalTotalValue;
var averageHeigh:Number=verticalTotalValue / 10;
this.graphics.lineStyle(1, 0x123456);
this.graphics.moveTo(-5, height);
this.graphics.lineTo(-5, height - verticalTotalValue * totalValueHeight);
/*this.graphics.moveTo(-5, height+1);
this.graphics.lineTo(width, height+1);*/
for (var i:int=0; i height - averageHeigh * i * totalValueHeight - label.height);
graphics.moveTo(label.x, label.y + label.height);
graphics.lineTo(-5, label.y + label.height);
}
/*for (var i:int=0; i
flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
implements="com.component.IColumnItemRender">
height - Number(xml.@data), 10, Number(xml.@data), Math.random() * 0xffffff, false);
var totalWidth:Number=0;
for (var i:int=0; i height;
object.width=20;
object.height=0;
object.color=myxml.children()[i].@color;
Tweener.addTween(object, {y: height - Number(myxml.children()[i].@data) * this.data.totalValueHeight, height: Number(myxml.children()[i].@data) * this.data.totalValueHeight, time: 2, onUpdate: onUpdateHandler, onUpdateParams: [graphics, object]});
trace(Number(myxml.children()[i].@data) * this.data.totalValueHeight);
/* drawColumn(graphics,
data.position * 100 + i * 25,
this.height - Number(myxml.children()[i].@data)*this.data.totalV alueHeight,
20, Number(myxml.children()[i].@data*this.data.totalVa lueHeight),
myxml.children()[i].@color,
true, 0xffffff, 0.8, 0.7); */
var label:Label=labelArray[i] as Label;
label.text=String(myxml.children()[i].@label);
label.move(data.position * 100 + i * 25, height + label.height);
var dataLabel:Label=labelDataArray[i] as Label;
dataLabel.text=String(myxml.children()[i].@data);
dataLabel.alpha=0;
dataLabel.move(data.position * 100 + i * 25, this.height - Number(myxml.children()[i].@data * this.data.totalValueHeight) - dataLabel.height);
Tweener.addTween(dataLabel, {alpha: 1, time: 2});
}
totalWidth=data.position * 80 + myxml.children().length() * 10;
var xLabel:Number=data.position * 100 + (25 * (myxml.children().length()) - myLabel.width) / 2;
var yLabel:Number=height + myLabel.height * 7;
myLabel.move(xLabel, yLabel);
var p1:Point=new Point(data.position * 100 - 5, height + myLabel.height);
var p2:Point=new Point(data.position * 100 - 5, height + myLabel.height * 5);
var p3:Point=new Point(data.position * 100 + 25 * myxml.children().length() + 5, height + myLabel.height * 5);
var p4:Point=new Point(data.position * 100 + 25 * myxml.children().length() + 5, height + myLabel.height);
var p5:Point=new Point(p2.x / 2 + p3.x / 2, height + myLabel.height * 7);
drawLines(this.graphics, p1, p2, p3, p4, p5, 0x123456);
}
//Computer the total data;
private function roopXml(xml:XML):XML
{
if (!xml)
{
return null;
}
/* var data:Number=0; */
for each (var tempxml:XML in xml.children())
{
//做数据相对转换
/* var tempData:Number=Number(tempxml.@data);
tempData*=this.data.totalValueHeight;
tempxml.@data=tempData; */
/* trace(this.data.totalValueHeight*Number(tempxml.@data));
tempxml.@data=this.data.totalValueHeight*Number(te mpxml.@data); */
//获得总数据;
/* data+=Number(tempxml.@data);
xml.@data=data;
roopXml(tempxml); */
}
return xml;
}
protected function drawColumn(graphics:Graphics, x:Number, y:Number, width:Number, height:Number, color:uint=0x000000, drawLine:Boolean=false, lineColor:uint=0x000000, alpha:Number=1, lineAlpha:Number=0.7):void
{
var xw:Number=x + width;
var yh:Number=y + height;
if (drawLine)
{
graphics.lineStyle(1, lineColor, lineAlpha, true);
}
else
{
graphics.lineStyle(1, color, lineAlpha, true);
}
graphics.beginFill(color, alpha);
graphics.moveTo(x, y);
graphics.lineTo(xw, y);
graphics.lineTo(xw, yh);
graphics.lineTo(x, yh);
graphics.endFill();
}
]]>
/*************************************************
****
**** 黄记新,2010-10-12,下午04:33:13
****
************************************************/
package com.component
{
public interface IColumnItemRender
{
function get data():Object;
function set data(object:Object):void;
}
}