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>