Flex中实时更新的柱状图的例子
<?xml version="1.0" encoding="utf-8"?>?
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
????? xmlns:s="library://ns.adobe.com/flex/spark"
????? xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="white"?
????applicationComplete="start()">?
?
?<fx:Declarations>??
??<s:ArrayCollection id="arrColl">?
???<s:source>?
????<fx:Array>?
?????<fx:Object name="1" avg="60" />?
?????<fx:Object name="2" avg="28" />?
?????<fx:Object name="3" avg="64" />?
?????<fx:Object name="4" avg="43" />?
?????<fx:Object name="5" avg="57" />?
?????<fx:Object name="6" avg="65" />?
?????<fx:Object name="7" avg="31" />?
?????<fx:Object name="8" avg="49" />?
?????<fx:Object name="9" avg="86" />?
?????<fx:Object name="10" avg="18" />?
?????<fx:Object name="11" avg="30" />?
?????<fx:Object name="12" avg="53" />?
?????<fx:Object name="13" avg="46" />?
?????<fx:Object name="14" avg="76" />?
?????<fx:Object name="15" avg="21" />?
????</fx:Array>?
???</s:source>?
??</s:ArrayCollection>? ?
??<mx:NumberFormatter id="numberFormatter" precision="1" />?
??<mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD" />?
?</fx:Declarations>
?
?<fx: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();
???//删除数组中第一个元素并返回该元素
???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);?
???//标记组件，在组件后续更新时调用该组件的updateDisplayList方法
???columnChart.invalidateDisplayList();?
??}?
??
??public function onTimerComplete(event:TimerEvent):void { ??
???Alert.show("数据自动更新停止！(每隔1秒更新一次,共计100次)");?
??}?
???
??]]>?
?</fx:Script>?
?
?
?
?
?<mx:ColumnChart id="columnChart" showDataTips="true" dataProvider="{arrColl}"?
?????columnWidthRatio="0.9" width="800" 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>?
???<fx:Array/>
??</mx:seriesFilters>?
??
?</mx:ColumnChart>?
?
</s:Application>?
