flex LineChart动态添加线

      这次遇到一个需求，要画一个线性图表，要求可以动态的在图表中加入一条线，并且每隔一段时间填入一组值后要能在图表上实时的显示出来。于是在查看了一些资料后自己实现了下，在数据存储时候遇到了麻烦，因为动态添加了线之后，不能在数据库中写死，有些麻烦。于是就想用xml来描述这个LineChart，数据库存这个xml的描述。

<?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" initialize="createChart()"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <fx:Script> <!--[CDATA[ import com.palm.chinaMobile.entity.MyLineChart; import com.palm.chinaMobile.web.LineChartAction; import mx.charts.CategoryAxis; import mx.charts.HitData; import mx.charts.series.LineSeries; import mx.charts.series.items.LineSeriesItem; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.dataGridClasses.DataGridColumn; import mx.events.CloseEvent; import mx.formatters.DateFormatter; [Bindable] // private var cl_srcArr:ArrayCollection = new ArrayCollection([{time:"10:30",BSC1:45,BSC2:43,BSC3:49,BSC4:35,BSC5:28},{time:"10:31",BSC1:49,BSC2:47,BSC3:45,BSC4:35,BSC5:28},{time:"10:32",BSC1:44,BSC2:45,BSC3:49,BSC4:35,BSC5:28},{time:"10:33",BSC1:47,BSC2:46,BSC3:47,BSC4:35,BSC5:28} // ,{time:"10:34",BSC1:47,BSC2:48,BSC3:43,BSC4:35,BSC5:28}]); private var cl_srcArr:ArrayCollection = new ArrayCollection([{time:"00:00"}]); [bindable] public var _linechart:MyLineChart = new MyLineChart(); protected function createChart():void{ var lineca:CategoryAxis = new CategoryAxis(); lineca.categoryField = "time"; lc_test.horizontalAxis = lineca; var lineSeries:Array = new Array(); var item:Object = cl_srcArr.getItemAt(0); var colArr:Array = new Array(); for(var sx:String in item){ var col:DataGridColumn = new DataGridColumn(); col.dataField = sx; col.headerText = sx; colArr.push(col); if(sx == "time") continue; var seriers:LineSeries = new LineSeries(); seriers.displayName = sx + "aa"; seriers.yField = sx; lineSeries.push(seriers); } dg_test.columns = colArr; lc_test.series = lineSeries; } protected function saveLcData():void{ Alert.show("确定要保存数据？","提示信息",Alert.YES|Alert.NO,null,function(e:CloseEvent):*{ if(e.detail==Alert.NO){ return; } else{ var lcdataXml:XML; var lcdataItem:Object = cl_srcArr.getItemAt(0); var xmlStr:String = "<?xml version='1.0' encoding='utf-8'?><lcDatas>" var propertyNameStr:String = ""; for(var sxn:String in lcdataItem){ if(sx=="mx_internal_uid") continue; propertyNameStr += sxn + ","; } xmlStr += "<property propertyName='"+ propertyNameStr +"'></property>"; for each(var item:Object in cl_srcArr){ xmlStr += "<data "; for(var sx:String in item){ if(sx=="mx_internal_uid") continue; xmlStr += sx+"='"+item[sx]+"' "; } xmlStr += "></data>"; } xmlStr += "</lcDatas>"; lcdataXml = new XML(xmlStr); _linechart.lcXmsStr = xmlStr; var date:Date = new Date(); var df:DateFormatter = new DateFormatter(); df.formatString = "YYYY-MM-DD"; var dateStr = df.format(date); _linechart.date = DateFormatter.parseDateString(dateStr); LineChartAction.saveLc(_linechart); } }); } protected function addItem():void{ var item:Object = new Object(); var colArr:Array = dg_test.columns; for each (var col:Object in colArr){ var df = col["dataField"]; if(df == "time"){ item[df] = "00:00"; continue; } item[df] = 0; } // item.time = txt_time.text; // item.BSC1 = (int)(txt_bsc1.text); // item.BSC2 = (int)(txt_bsc2.text); // item.BSC3 = (int)(txt_bsc3.text); cl_srcArr.addItem(item); if(cl_srcArr.length>20) cl_srcArr.removeItemAt(0); } protected function addCol():void{ for each(var item:Object in cl_srcArr){ item[txt_colName.text] = 0; } var dgCols:Array = dg_test.columns; var lcSeries:Array = lc_test.series; var col:DataGridColumn = new DataGridColumn(); col.dataField = txt_colName.text; col.headerText = txt_colName.text; dgCols.push(col); dg_test.columns = dgCols; var seriers:LineSeries = new LineSeries(); seriers.displayName = txt_colName.text + "aa"; seriers.yField = txt_colName.text; lcSeries.push(seriers); lc_test.series = lcSeries; } private function lineChart_dataTipFunction(item:HitData):String { var lSI:LineSeriesItem = item.chartItem as LineSeriesItem; return "<font size='12' color='#ffffff'><b>" + lSI.item.time + "</b><br />" + (lSI.element as LineSeries).yField + "<br>" + lSI.yValue + "</br></font>"; } ]]--> </fx:Script> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> <mx:Stroke id = "s1" color="blue" weight="2"/> <mx:Stroke id = "s2" color="red" weight="2"/> <mx:Stroke id = "s3" color="green" weight="2"/> </fx:Declarations> <mx:Panel width="100%" height="100%" title="负荷监控" layout="absolute"> <mx:Legend dataProvider="{lc_test}"/> <mx:LineChart id="lc_test" showDataTips="true" dataProvider="{cl_srcArr}" right="20" top="0" left="90" bottom="250" dataTipFunction="lineChart_dataTipFunction"> <!--<mx:horizontalAxis> <mx:CategoryAxis categoryField="time"> </mx:CategoryAxis> </mx:horizontalAxis> <mx:series> <mx:LineSeries displayName="BSC1" yField="BSC1" form="segment" lineStroke="{s1}"/> <mx:LineSeries displayName="BSC2" yField="BSC2" form="segment" lineStroke="{s2}"/> <mx:LineSeries displayName="BSC3" yField="BSC3" form="segment" lineStroke="{s3}"/> </mx:series>--> </mx:LineChart> <mx:DataGrid id="dg_test" right="20" left="382" bottom="20" height="222" dataProvider="{cl_srcArr}" editable="true"> <!--<mx:columns> <mx:DataGridColumn headerText="时间" dataField="time"/> <mx:DataGridColumn headerText="BSC1" dataField="BSC1"/> <mx:DataGridColumn headerText="BSC2" dataField="BSC2"/> <mx:DataGridColumn headerText="BSC3" dataField="BSC3"/> <mx:DataGridColumn headerText="BSC4" dataField="BSC4"/> </mx:columns>--> </mx:DataGrid> <mx:Label text="列名：" left="24" bottom="203" width="49" height="21" fontSize="12"/> <mx:TextInput left="72" bottom="199" width="118" id="txt_colName" restrict="0-9/a-z/A-Z"/> <s:Button label="添加列" bottom="198" left="207" click="addCol()"/> <s:Button label="添加行" bottom="198" left="304" click="addItem()"/> <s:Button label="保存" bottom="165" left="304" click="saveLcData()"/> </mx:Panel> </mx:Module>