Flex LineChart动态创建曲线

假如后台传到前台的数据格式是:

[
 {time:4, [{name:"技术响应时长", value:50%}], {name:"排除故障时长", value:50%}]},
 {time:5, [{name:"技术响应时长", value:40%}, {name:"排除故障时长", value:60%}]},
 {time:6, [{name:"技术响应时长", value:70%}, {name:"排除故障时长", value:30%}]}
]


 

那么前台创建曲线是

protected function getMEMPerfDataResult(event:BusinessManagerEvent):void
			{
				var arrcol:ArrayCollection = event.object as ArrayCollection;
				if(arrcol && arrcol.length>0){
					var dataProvider:ArrayCollection  = new ArrayCollection();
					var timeChartVo:TimeChartVO = arrcol[0] as TimeChartVO;
					 var array:Array = [];
					var lineSeries:LineSeries;
					for (var i:int = 0; i < timeChartVo.series.length; i++) 
					{
						lineSeries = new LineSeries();
						lineSeries.displayName = "物理内存利用率";
						lineSeries.yField="value"+i;
						lineSeries.setStyle("form", "curve");  
						lineSeries.setStyle("lineStroke",seriesStrok0);
						/* if(i<7){
							lineSeries.setStyle("lineStroke",seriesStrok0);
						} */
						array.push( lineSeries);
					} 
					
					/ 设置系列数量。
					memoryUsageChart.series = array;
					
					 
					for (i = 0; i < arrcol.length; i++) 
					{
						timeChartVo = arrcol[i] as TimeChartVO;
						var obj:Object = {};
						obj.lineTime = timeChartVo.lineTime;
						for(var j:int = 0;j<timeChartVo.series.length;j++){
							obj["value"+j] = SeriesVO(timeChartVo.series[j]).value;
						}
						dataProvider.addItem(obj);
					} 	
					
					memoryUsageChart.dataProvider = dataProvider;
				}
			}


 

相应的MXML:

<mx:LineChart id="memoryUsageChart" color="#00A7FF" width="90%" height="80%"
							  showDataTips="true" horizontalCenter="0" verticalCenter="0">
					<mx:backgroundElements>
						<mx:GridLines gridDirection="both">
							<mx:verticalStroke>
								<s:SolidColorStroke color="#274E79"/>
							</mx:verticalStroke>
							<mx:horizontalStroke>
								<s:SolidColorStroke color="#274E79"/>
							</mx:horizontalStroke>
						</mx:GridLines>
					</mx:backgroundElements>
					<mx:horizontalAxis>
						<mx:CategoryAxis id="memoryCategoryAxis" categoryField="lineTime" title="时间"/>
					</mx:horizontalAxis>
					<mx:verticalAxis>
						<mx:LinearAxis id="memorylinearAxis" baseAtZero="false" title="内存利用率"/>
					</mx:verticalAxis>
					<mx:verticalAxisRenderers>
						<mx:AxisRenderer id="memoryvAxisRenderer" axis="{memorylinearAxis}" axisStroke="{vstroke}" />
					</mx:verticalAxisRenderers>
					<mx:series>
						<mx:LineSeries yField="value" form="segment" displayName="内存利用率"
									   lineStroke="{seriesStrok1}"/>
					</mx:series>
				</mx:LineChart>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值