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里实现。