2007-11-03

Linechart使用中的细节(3)

关键字: Flex LineChart

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

 

 

评论
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

sheva.wen
  • 浏览: 5887 次
  • 性别: Icon_minigender_1
  • 来自: 呼和浩特
  • 详细资料
搜索本博客
存档
最新评论