Flex中LineChart自动生成线形图

最新推荐文章于 2022-03-03 00:48:22 发布

love_幸运儿

最新推荐文章于 2022-03-03 00:48:22 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：标记文章标签： flex application function object encoding import

本文链接：https://blog.youkuaiyun.com/dongdingbaihe/article/details/3957075

标记专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何在Flex应用中创建一个动态更新的LineChart组件。通过MXML和ActionScript实现数据源的实时更新，展示随机生成的线形图数据，周期性地添加新的数据点。

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

.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        //为LineChart 定义变量,用来存储LineChart的数据源
        private var gprsAC:ArrayCollection = new ArrayCollection();

        private static const MINISECENDS:int=1000;
        //初始页面时执行
     private function initApp():void
     {
        setInterval(addArr,MINISECENDS)//设置参数1,要执行的方法;参数2,频率大小,以毫秒为单位
     }

        private var i:Number = 1;
        private var tmp_obj:Object;
        private function addArr():void
        {
          tmp_obj = new Object();
          var temp_count:Number = Math.ceil(Math.random()*100);
          //Math.ceil取该数中整数的部分,如果后面带有小数,向上加1,若是整数,直接取整.如2.3则为3,4.0则为4
          //Math.randow生成的随机数,范围在0与1之间.
          tmp_obj["time"]=i;
          tmp_obj["count"]=temp_count;
          gprsAC.addItem(tmp_obj);
          i++;
          if(i==24)
          {
             i = 1;
          }
        }
    ]]>
</mx:Script>
<mx:LineChart id="linchart" color="#333399" width="100%" height="100%" dataProvider="{gprsAC}"
     showDataTips="true" fontSize="12" y="77" x="10">
         <mx:horizontalAxis>
         <mx:CategoryAxis categoryField="time"/>
         </mx:horizontalAxis>
         <mx:backgroundElements>
         <mx:GridLines direction="horizontal">
         <mx:horizontalStroke>
         <mx:Stroke weight="1.5" color="#333399" alpha="0.2"/>
         </mx:horizontalStroke>
         </mx:GridLines>
         </mx:backgroundElements>
   <mx:series>
          <mx:LineSeries id="lineserie" width="160" yField="count"/></mx:series></mx:LineChart>
</mx:Application>