3、关于自定义ItemRenderer
个人觉得即使Flex不开源,现有的功能就很大程度的能够满足自定义的需求。对于通过数据绑定实现的控件(List,DataGrid,Chart),每一行数据的呈现都可以自定义——自定义样式,自定义行为。对于LineChart中,默认的状况是用圆点描述每个数据,然后连起来,鼠标经过圆点时显示点上横纵座标的值。自定义的需求就有许多,比如不需要鼠标经过就显示点上的值,比如使用其它形状的点标示数据,比如用不同的颜色标示每个点,等等,其实都是一些定义ItemRenderer样式的问题。
举个例子:比如实现默认在点上标记某个数据,不需要鼠标经过,这个可以通过将ItemRenderer设置成一个Label来实现。这个Label首先要继承UIComponent,如果要实现显示该点上的数据的话就要实现 IDataRenderer 来获取。它的表现样式是通过重写updateDisplayList方法实现的。
as 代码
-
import?mx.charts.ChartItem; ??
-
import?mx.core.IDataRenderer; ??
-
import?mx.controls.Label; ??
-
import?mx.core.UIComponent; ??
-
import?mx.charts.series.LineSeries; ??
-
import?mx.charts.series.items.LineSeriesItem; ??
-
import?flash.display.Graphics; ??
-
import?flash.geom.Rectangle; ??
-
import?mx.charts.chartClasses.GraphicsUtilities; ??
-
import?mx.core.IDataRenderer; ??
-
import?mx.graphics.IFill; ??
-
import?mx.graphics.IStroke; ??
-
import?mx.skins.ProgrammaticSkin; ??
-
import?mx.controls.Label; ??
-
import?mx.core.UIComponent; ??
-
??
-
public?class?MyLabel?extends?UIComponent?implements?IDataRenderer ??
-
{ ??
-
????private?var?_label:Label; ??
-
???? ??
-
????public?function?MyLabel():void??
-
????{ ??
-
????????super(); ??
-
????????_label?=?new?Label(); ??
-
????????addChild(_label); ??
-
????????_label.setStyle("color",0x999999); ??
-
????????_label.setStyle("paddingTop",4);????? ??
-
????} ??
-
????private?var?_chartItem:ChartItem; ??
-
??
-
????public?function?get?data():Object ??
-
????{ ??
-
????????return?_chartItem; ??
-
????} ??
-
??
-
????public?function?set?data(value:Object):void??
-
????{ ??
-
????????if?(_chartItem?==?value) ??
-
????????????return; ??
-
????????_chartItem?=?ChartItem(value); ??
-
??
-
????????if(_chartItem?!=?null) ??
-
????????????_label.text?=?LineSeriesItem(_chartItem).yValue.toString(); ??
-
????} ??
-
?? ??
-
????override?protected?function?updateDisplayList(unscaledWidth:Number,??
-
??????????????????????????????????????????????????unscaledHeight:Number):void??
-
????{ ??
-
????????super.updateDisplayList(unscaledWidth,?unscaledHeight); ??
-
???????????????? ??
-
????????_label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExplicitOrMeasuredHeight()); ??
-
????} ??
-
??
-
}??
当然也可以将ItemRenderer设置成其它空间,在Chart中常用的会是CircleItemRenderer(圆点)等等。对不同的点的现实不同效果可以通过将逻辑写到自定义的ItemRenderer里实现。