Linechart使用中的细节(3)

3、关于自定义ItemRenderer

个人觉得即使Flex不开源，现有的功能就很大程度的能够满足自定义的需求。对于通过数据绑定实现的控件(List，DataGrid，Chart)，每一行数据的呈现都可以自定义——自定义样式，自定义行为。对于LineChart中，默认的状况是用圆点描述每个数据，然后连起来，鼠标经过圆点时显示点上横纵座标的值。自定义的需求就有许多，比如不需要鼠标经过就显示点上的值，比如使用其它形状的点标示数据，比如用不同的颜色标示每个点，等等，其实都是一些定义ItemRenderer样式的问题。

举个例子：比如实现默认在点上标记某个数据，不需要鼠标经过，这个可以通过将ItemRenderer设置成一个Label来实现。这个Label首先要继承UIComponent，如果要实现显示该点上的数据的话就要实现 IDataRenderer 来获取。它的表现样式是通过重写updateDisplayList方法实现的。

as 代码

1. import mx.charts.ChartItem;   
2. import mx.core.IDataRenderer;   
3. import mx.controls.Label;   
4. import mx.core.UIComponent;   
5. import mx.charts.series.LineSeries;   
6. import mx.charts.series.items.LineSeriesItem;   
7. import flash.display.Graphics;   
8. import flash.geom.Rectangle;   
9. import mx.charts.chartClasses.GraphicsUtilities;   
10. import mx.core.IDataRenderer;   
11. import mx.graphics.IFill;   
12. import mx.graphics.IStroke;   
13. import mx.skins.ProgrammaticSkin;   
14. import mx.controls.Label;   
15. import mx.core.UIComponent;   
16.   
17. public class MyLabel extends UIComponent implements IDataRenderer   
18. {   
19.     private var _label:Label;   
20.        
21.     public function MyLabel():void  
22.     {   
23.         super();   
24.         _label = new Label();   
25.         addChild(_label);   
26.         _label.setStyle("color",0x999999);   
27.         _label.setStyle("paddingTop",4);        
28.     }   
29.     private var _chartItem:ChartItem;   
30.   
31.     public function get data():Object   
32.     {   
33.         return _chartItem;   
34.     }   
35.   
36.     public function set data(value:Object):void  
37.     {   
38.         if (_chartItem == value)   
39.             return;   
40.         _chartItem = ChartItem(value);   
41.   
42.         if(_chartItem != null)   
43.             _label.text = LineSeriesItem(_chartItem).yValue.toString();   
44.     }   
45.      
46.     override protected function updateDisplayList(unscaledWidth:Number,   
47.                                                   unscaledHeight:Number):void  
48.     {   
49.         super.updateDisplayList(unscaledWidth, unscaledHeight);   
50.                    
51.         _label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExplicitOrMeasuredHeight());   
52.     }   
53.   
54. }  

当然也可以将ItemRenderer设置成其它空间，在Chart中常用的会是CircleItemRenderer（圆点）等等。对不同的点的现实不同效果可以通过将逻辑写到自定义的ItemRenderer里实现。