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

来源：互联网发布：网络算命软件下载编辑：程序博客网时间：2024/06/11 19:44

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

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

<?xml version="1.0"?>

<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>

<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"/>

<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"?>

<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>

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

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

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