关于利用Flex lineChart绘制类似win系统下资源管理器时序图的例子

最近因为项目需要，需要实现linechart下的数据及时推进效果，类似win系统中监控cup资源的折线图效果，推进方向是从右到左，后来又扩展了从左到右边的方式，具体见代码。

 

从右边到左边的推荐，样式没有改进，撮合看了。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

    <mx:Script>
        <![CDATA[
         import mx.charts.series.items.LineSeriesItem;
         import mx.charts.HitData;
         import mx.charts.chartClasses.Series;

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection();
       
        private var num:int = 0;
       
        private function dataTipFunction(item:HitData):String
        {
         var LCI:LineSeriesItem = item.chartItem as LineSeriesItem;
         return LCI.item.profit;
        }
        
               
        /**
        * 从右边到左边生成时序图逻辑
        **/
        private function rightLineHandler(event:TimerEvent):void
  {
   var obj:Object = new Object();
         obj.Month = 99 + num;
         obj.Amount = 25 + (Math.random() * 50);
         expensesAC.addItem(obj);
         
         if(num > 0)
         {
          //循环将系列数据中的x轴递减1
    for each(var item:Object in expensesAC)
    {
     item.Month = Number(item["Month"]) -1;
    }
    num = 2;
    
    return;
         }
         
         num += 1;
  }
  
  private function init():void
  {
   var timer:Timer = new Timer(1000, 10000);
   timer.addEventListener(TimerEvent.TIMER, rightLineHandler);
   timer.start();
  }
        ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills in the AreaChart control. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".2"/>
    <mx:SolidColor id="sc2" color="red" alpha=".2"/>
    <mx:SolidColor id="sc3" color="green" alpha="1"/>
   
    <mx:SeriesInterpolate id="interpolateIn" duration="1000"/>

    <!-- Define custom Strokes. -->
    <mx:Stroke id = "s1" color="blue" weight="1"/>
    <mx:Stroke id = "s2" color="red" weight="1"/>
    <mx:Stroke id = "s3" color="green" weight="2"/>
   
    <mx:Stroke id="ticks" color="0xFF0000" weight="1"/>
   <mx:Stroke id="mticks" color="0x0000FF" weight="1"/>
   
   <mx:SeriesSlide id="downSlide" duration="1000" direction="up"/>

    <mx:Panel title="LineChart and AreaChart Controls Example"
        height="100%" width="100%" layout="horizontal">

        <mx:LineChart id="linechart" height="100%" width="100%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{expensesAC}">
          
            <mx:horizontalAxis>
                <mx:LinearAxis interval="100" displayName="Month" maximum="100" minimum="0"/>
            </mx:horizontalAxis>
          
            <mx:series>
                <mx:LineSeries yField="Amount" xField="Month" radius="5"
                 displayName="Amount" fill="{sc3}" lineStroke="{s3}">
                </mx:LineSeries>
            </mx:series>
        </mx:LineChart>

        <mx:Legend dataProvider="{linechart}"/>

    </mx:Panel>
</mx:Application>

 

2.从左到右边的方式

<?xml version="1.0"?>
<!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

    <mx:Script>
        <![CDATA[
         import mx.charts.series.items.LineSeriesItem;
         import mx.charts.HitData;
         import mx.charts.chartClasses.Series;

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection();
       
        private var num:int = 0;
       
        private function dataTipFunction(item:HitData):String
        {
         var LCI:LineSeriesItem = item.chartItem as LineSeriesItem;
         return LCI.item.profit;
        }
       
        /**
        * 从左边到右边生成时序图逻辑
        **/
        private function leftLineHandler(event:TimerEvent):void
  {
   //判断缓存中已经存在的字段数量是否达到最大值10个，如果是则先删除原先的字段
   if(expensesAC.length > 100)
   {
    expensesAC.removeItemAt(0);
    //循环将系列数据中的x轴递减1
    for each(var item:Object in expensesAC)
    {
     item.Month = Number(item["Month"]) -1;
    }
    num = 100;
   }
   
   var obj:Object = new Object();
         obj.Month = 99 + num;
         obj.Amount = 25 + (Math.random() * 50);
         expensesAC.addItem(obj);
         
         num += 1;
  }
       
         
  private function init():void
  {
   var timer:Timer = new Timer(1000, 10000);
   timer.addEventListener(TimerEvent.TIMER, leftLineHandler);
   timer.start();
  }
        ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills in the AreaChart control. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".2"/>
    <mx:SolidColor id="sc2" color="red" alpha=".2"/>
    <mx:SolidColor id="sc3" color="green" alpha="1"/>
   
    <mx:SeriesInterpolate id="interpolateIn" duration="1000"/>

    <!-- Define custom Strokes. -->
    <mx:Stroke id = "s1" color="blue" weight="1"/>
    <mx:Stroke id = "s2" color="red" weight="1"/>
    <mx:Stroke id = "s3" color="green" weight="2"/>
   
    <mx:Stroke id="ticks" color="0xFF0000" weight="1"/>
   <mx:Stroke id="mticks" color="0x0000FF" weight="1"/>
   
   <mx:SeriesSlide id="downSlide" duration="1000" direction="up"/>

    <mx:Panel title="LineChart and AreaChart Controls Example"
        height="100%" width="100%" layout="horizontal">

        <mx:LineChart id="linechart" height="100%" width="100%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{expensesAC}">
          
            <mx:horizontalAxis>
                <mx:LinearAxis interval="100" displayName="Month" maximum="100" minimum="0"/>
            </mx:horizontalAxis>
          
            <mx:series>
                <mx:LineSeries yField="Amount" xField="Month" radius="5"
                 displayName="Amount" fill="{sc3}" lineStroke="{s3}">
                </mx:LineSeries>
            </mx:series>
        </mx:LineChart>

        <mx:Legend dataProvider="{linechart}"/>

    </mx:Panel>
</mx:Application>