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

最新推荐文章于 2014-02-13 20:28:26 发布

cindyhbbl

最新推荐文章于 2014-02-13 20:28:26 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： flex

本文链接：https://blog.youkuaiyun.com/cindyhbbl/article/details/19171607

flex 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何在Flex中实现线形图，包括全实线、虚线和半实半虚线的绘制，并重点讲解了如何通过自定义itemRenderer、legendMarkerRenderer和lineSegmentRenderer来改变线条样式，以创建带圆点图例的线形图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：绘制线形图，其中一条为全实线，一条为虚线，一条为半实半虚；图例为线条加圆点。

困难：要改变线形图的样式，必须重写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++; 
   } 
   
  }