flex 线形图为虚线,绘制图例(1)

背景:绘制线形图,其中一条为全实线,一条为虚线,一条为半实半虚;图例为线条加圆点。

困难:要改变线形图的样式,必须重写itemRenderer(节点渲染器),legendMarkerRenderer(图例渲染器),lineSegmentRenderer(线条渲染器)

 

(一)全虚线:lineSegmentRenderer="renderer.MarcoLineRenderer"

//全虚线
 public class MarcoLineRenderer extends LineRenderer
 {
  public function MarcoLineRenderer()
  {
   super();
  }
  
  //虚线条之间的间隔长度
  private var twoPointDistance:int = 10; 


  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
  { 
   var stroke:IStroke = getStyle("lineStroke"); 
   var form:String = getStyle("form"); 
   var items:Array = data.items; 
   
   var g:Graphics = graphics; 
   g.clear(); 
   
   stroke.apply(g, null, null); 
   
   var i:int = 0; 
   var len:int = items.length; 
   
   for each( var item:LineSeriesItem in items ) 
   { 
    //从第2个点开始画连接虚线
    if( i > 0 ) 
    { 
     var preItem:LineSeriesItem = items[i-1]; 
     //当前值不为0,才与前一个点连接
     if(item.yValue >0)
     {
       drawDash(g, len, preItem.x, preItem.y, item.x, item.y); 
     }
    } 
    i++; 
   } 
   
  } 
  


 

你可能感兴趣的:(flex)