登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

flex 绘制行情图  

2009-12-10 13:12:57|  分类: flex技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="complete()">
<mx:Script>
<![CDATA[
   import mx.core.IUITextField;
   import mx.core.UITextField;
   import mx.collections.ArrayCollection;
   import mx.controls.Label;
   import mx.core.UIComponent;
   import flash.display.Sprite;
   import flash.geom.Point;
   import flash.external.ExternalInterface;
   import mx.controls.Alert;
   import mx.utils.ObjectUtil;
   private var b:Point=new Point();
   // x 轴 的提示
   private var lblx:Label = new Label();
   // y 轴 的提示
   private var lbly:Label = new Label();
   private var flag:Boolean = false;
   private var iUITextField:IUITextField ;
   //circle用于 绘制 行情图的节点
   private var circle:Sprite = new Sprite();
   //test 用于绘制行情曲线
   private var test:Sprite=new Sprite();
   //uc是一个容器,用于包装 sprite,不然this不能直接addchild sprite对象
   private var uc:UIComponent = new UIComponent();
   //这个ary 用于存放 行情曲线上 节点 的 位置     不过我们这个程序并没有用到
   private var CircleAry:ArrayCollection = new ArrayCollection;
   //data_month 用于存放 x 轴 的信息,比如我是按月 显示行情
   [Bindable]
   private static var data_month:ArrayCollection = new ArrayCollection([
    {label:"Jan", data:"1"},
       {label:"Feb", data:"2"},
       {label:"Mar", data:"3"},
       {label:"April",data:"4"},
       {label:"May", data:"5"},
       {label:"Jun", data:"6"},
       {label:"Jul", data:"7"},
       {label:"Aug", data:"8"},
       {label:"Sep", data:"9"},
       {label:"Oct", data:"10"},
       {label:"Nov", data:"11"},
       {label:"Dec", data:"12"}
   ]);
   // 画面记载完成的时候调用 相当于window.onload
   private function complete():void{
     var i:Number=0;   
     // iUITextField = new IUITextField(createInFontContext(UITextField));
   
     //绘制 竖 坐标轴 你可以看到 我 实际上 是从上往下画的,从(100,100) 画到 (100,700)
     //另外可以注意到 circle 是从下往上画的,因为 第二个参数 -i*30 ,
     var testx:Sprite=new Sprite();
     testx.x=100;
     testx.y=100;
     //绘制 竖 坐标轴
     testx.graphics.lineStyle(1);
   testx.graphics.lineTo(0,600);
   //绘制 竖 坐标轴 节点
   circle.graphics.beginFill(0xFFCC00);
   for(i=0;i<600/30;i++){
         circle.graphics.drawCircle(0, -i*30, 2);
   }      
       //绘制 横 坐标轴 并在起始点添加一个圆
       var testy:Sprite=new Sprite();
     testy.x=100;
     testy.y=700;
     circle.graphics.beginFill(0xFFCC00);
     for(i=0;i<500/50;i++){
         circle.graphics.drawCircle(50*i, 0, 2);
        }
     // 下面这句话才完成了 circle 的 初始化,circle的起点定在了 testy的起点,所以 给 竖 轴绘制节点的时候是从下往上绘制的
     testy.addChild(circle);
     //绘制 横 轴,
     testy.graphics.lineStyle(1);
        testy.graphics.lineTo(500,0);
        //初始化行情曲线
     test.x=100;
     test.y=700;
     test.graphics.lineStyle(1);
        test.graphics.lineTo(10,-10);
        //将三条线都加入到uc中
     uc.addChild(testx);
     uc.addChild(testy);
     uc.addChild(test);
     //将uc加入画面  
     addChild(uc);
     //绘制 行情图
     for(i=1;i<10;i++){
      var x:Number = i*50;
      var y:Number = ((i-3)*(i-3)+2)*30;
      huatu(x,-y);
     }
    
     var lbl:Label;
     //在 横 轴输出月份
     for (i=0;i<10;i++){
      lbl = new Label;
      lbl.text=data_month.getItemAt(i,0).label;
      lbl.x = 100 + 50*i + 15;
      lbl.y = 720;
      addChild(lbl);
     }
     // 在 竖 轴输出 点数
     for(i=0;i<20;i++){
      lbl = new Label;
      lbl.text=i*30+"";
      lbl.x = 60;
      lbl.y = 700-30*i-8;
      addChild(lbl);
     }
     // 试着使用 ObjectUtil ,好处多多
     trace(ObjectUtil.toString(CircleAry));
     
     // 清空lbl_tip的值    
     lbl_tip.text = "";
     //注意我是给 circle 添加事件,这样鼠标移到 所有的节点上都会 触发事件,
     circle.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
     circle.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);
}

   //鼠标移上去的时候 把lbl_tip显示在鼠标位置,并显示值
   private function mouse_over(e:MouseEvent):void{
   lbl_tip.x = e.stageX+20;
   lbl_tip.y = e.stageY+20;
   lbl_tip.text = "x="+e.stageX.toString()+"\ny="+e.stageY.toString();
   }
   //鼠标移开的时候,把值清空,看起来lbl_tip就消失了
   private function mouse_out(e:MouseEvent):void{
    lbl_tip.text = "";
   }
   //绘制曲线,并画小圆圈
   public function huatu(x:Number,y:Number):void{
     test.graphics.lineTo(x,y);
     circle.graphics.beginFill(0xFFCC00);
     circle.graphics.drawCircle(x, y, 5);
     var obj:Object=new Object;
     obj["x"]=x;
     obj["y"]=y;
     CircleAry.addItem(obj);
   }

]]>
</mx:Script>
<mx:Label x="83" y="80" text="Y 轴(点数)"/>
<mx:Label x="600" y="700" text="X 轴(月份)"/>
<mx:XMLList xmlns="" id="myxml">
<items>   
   <item month="Jan" value="11" />
   <item month="Feb" value="14" />
   <item month="Mar" value="20" />
   <item month="Apr" value="22" />
   <item month="May" value="27" />
   <item month="June" value="39" />
   <item month="July" value="42" />
   <item month="Aug" value="36" />
   <item month="Sept" value="50" />
   <item month="Oct" value="52" />
   <item month="Nov" value="60" />
   <item month="Dec" value="50" />
</items>
</mx:XMLList>
<mx:Label id="lbl_tip" x="600" y="80" text="Label" color="#0D1E22" height="52" width="66" alpha="0.0"/>
</mx:Application>

  评论这张
 
阅读(984)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018