论坛首页 Web前端技术论坛

Linechart使用中的细节(3)

浏览 4330 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-11-03  

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

 

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics