Flex中实时更新的柱状图的例子

不多说了，直接贴代码。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="start()"> <mx:ArrayCollection id="arrColl"> <mx:source> <mx:Array> <mx:Object name="1" avg="60" /> <mx:Object name="2" avg="28" /> <mx:Object name="3" avg="64" /> <mx:Object name="4" avg="43" /> <mx:Object name="5" avg="57" /> <mx:Object name="6" avg="65" /> <mx:Object name="7" avg="31" /> <mx:Object name="8" avg="49" /> <mx:Object name="9" avg="86" /> <mx:Object name="10" avg="18" /> <mx:Object name="11" avg="30" /> <mx:Object name="12" avg="53" /> <mx:Object name="13" avg="46" /> <mx:Object name="14" avg="76" /> <mx:Object name="15" avg="21" /> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import mx.charts.chartClasses.IAxis; private function start() : void { var timer:Timer = new Timer(1000, 100); timer.addEventListener(TimerEvent.TIMER, onTick); timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete); timer.start(); } private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { return numberFormatter.format(item); } private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String { // var datNum:Number = Date.parse(item); // var tempDate:Date = new Date(datNum); // return dateFormatter.format(tempDate).toUpperCase(); return ""; } public function onTick(event:TimerEvent):void { //var arr : Array = arrColl.toArray().shift() as Array; var arr : Array = arrColl.toArray(); var index : int = arr.shift().name + 15; var data : Object = new Object(); data.name = index; data.avg = Math.ceil(Math.random()*100); arr.push(data); arrColl = new ArrayCollection(arr); columnChart.invalidateDisplayList(); } public function onTimerComplete(event:TimerEvent):void { Alert.show("数据自动更新停止！(每隔1秒更新一次,共计100次)"); } ]]--> </mx:Script> <mx:NumberFormatter id="numberFormatter" precision="1" /> <mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD" /> <mx:ColumnChart id="columnChart" showDataTips="true" dataProvider="{arrColl}" columnWidthRatio="0.9" width="200" height="100%"> <mx:horizontalAxis> <mx:CategoryAxis id="ca" categoryField="name" labelFunction="categoryAxis_labelFunc"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis baseAtZero="false" minimum="0" maximum="100" labelFunction="linearAxis_labelFunc" /> </mx:verticalAxis> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{ca}" canDropLabels="false" /> </mx:horizontalAxisRenderers> <mx:series> <mx:ColumnSeries id="columnSeries" xField="name" yField="avg" displayName="avg" /> </mx:series> <mx:seriesFilters> <mx:Array /> </mx:seriesFilters> </mx:ColumnChart> </mx:Application>