关于利用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>