Flex3 LineChart动态添加数据源(动态添加线)

主要是为了解决当数据源不确定到底有几类数据的问题,只要动态添加线就可以了,LineChart这个组件可以先写出来,不多说直接上代码:

<?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"
			   minWidth="955"
			   minHeight="600">
	<fx:Declarations>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.charts.series.LineSeries;
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;

			[Bindable]
			public var arrayC:ArrayCollection=new ArrayCollection(); //数据源
			private var array:Array=[]; //存储 myChart.series数据源

			/** 移除数据
			 * @author liuweiwei 2012-10-23
			 * @return name
			 */
			private function removeFromArray(name:String):void
			{
				for (var a:String in arrayC)
				{
					trace("删除属性:" + arrayC[a][name]);
					delete arrayC[a][name];
				}

				array=[];
				for (var b:String in myChart.series)
				{
					if (myChart.series[b].yField != name)
					{
						array.push(myChart.series[b]);
					}
				}
				myChart.series=array;
				//myChart.dataProvider = arrayC;			
				legend_id.dataProvider=myChart;
			}

			/** 添加数据除数据
			 */
			private function addToAC():void
			{
				/*判断 数据源是否为空,为空直接放入第一个AC对象  ,否则 将自己的第二个属性值加入到数据源中*/
				if (arrayC.length > 0)
				{
					var newAc:ArrayCollection=createArray();
					for (var a:String in arrayC)
					{
						for (var c:String in newAc)
						{
							if (arrayC[a].Date == newAc[c].Date)
							{
								var name:String=getObjectProperties(newAc[c], 1);
								arrayC[a][name]=newAc[c][name];
								trace("增加属性:" + newAc[c][name]);
								break;
							}
						}
					}
				}
				else
				{
					arrayC=createArray();
				}

				/*根据数据源动态生成线*/
				/*1.取出每个要增加对象的属性 name   */
				/* 拿到AC的第一个对象,就可以拿到他的所有属性名*/
				var obejct:Object=arrayC.getItemAt(0);
				var objInfo:Object=ObjectUtil.getClassInfo(obejct);
				var fieldNames:Array=objInfo["properties"] as Array;
				var newFileNames:Array=[];
				for each (var q:String in fieldNames)
				{
					if (q != "Date")
					{
						newFileNames.push(q);
					}

				}
				/*2.根据name  取出相应  对象值*/

				array=[];
				for (var b:String in newFileNames)
				{
					var lineSeries:LineSeries=new LineSeries(); //设置图表的系列
					lineSeries.xField="Date"
					lineSeries.yField=newFileNames[b];
					lineSeries.displayName=newFileNames[b];
					lineSeries.setStyle("form", "curve");
					//lineSeries.setStyle("lineStroke",s1);
					//替换或者新增
					array.push(lineSeries);
				}

				myChart.series=array; //给图表系列赋值
			}



			/** 返回对象的某个属性名称
			 * @author liuweiwei 2012-10-23
			 * @param obejct
			 * @param index
			 * @return name
			 */
			public function getObjectProperties(obejct:Object, index:int):String
			{
				var objInfo:Object=ObjectUtil.getClassInfo(obejct);
				//获取到对象的类名

				//获取到对象的属性列表
				var fieldName:Array=objInfo["properties"] as Array;

				return fieldName[index];
			}

			private function getPt():void
			{
				var _menu:Object={Date: "2011-12-1", "能源": 17};
				var a:String=getObjectProperties(_menu, 0);
				var b:String=getObjectProperties(_menu, 1);
				trace(a);
				trace(b);
			}

			private function createArray():ArrayCollection
			{
				var ac:ArrayCollection=new ArrayCollection();
				var name:String="设备" + Math.floor(Math.random() * 10);

				for (var i:int=0; i < 12; i++)
				{
					var o:Object=new Object();
					o.Date=i + "时";
					o[name]=Math.floor(Math.random() * 10);
					ac.addItem(o);
				}

				return ac;
			}

			protected function button3_clickHandler(event:MouseEvent):void
			{
				removeFromArray(remove_id.text);
			}
		]]>
	</fx:Script>
	<mx:Legend dataProvider="{myChart}"
			   height="20"
			   id="legend_id"/>
	<mx:LineChart id="myChart"
				  dataProvider="{arrayC}"
				  width="400"
				  height="360"
				  showDataTips="true">
		<mx:verticalAxis>
			<mx:LinearAxis id="laxis"
						   autoAdjust="true"
						   baseAtZero="false"/>
		</mx:verticalAxis>
		<mx:horizontalAxis>
			<mx:CategoryAxis id="ca"
							 dataProvider="{arrayC}"
							 categoryField="Date"/>

		</mx:horizontalAxis>
		<mx:horizontalAxisRenderers>
			<mx:AxisRenderer axis="{ca}"
							 canDropLabels="true"/>
		</mx:horizontalAxisRenderers>
		<mx:series>
		</mx:series>
	</mx:LineChart>

	<s:Button label="获取对象属性"
			  click="getPt()"/>
	<s:Button label="createArray"
			  click="createArray()"/>
	<s:Button label="新增"
			  click="addToAC()"/>
	<s:TextInput text="设备"
				 id="remove_id"/>
	<s:Button label="移出"
			  click="button3_clickHandler(event)"/>

</s:Application>


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值