加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flex LineChart动态创建曲线

发布时间:2020-12-15 04:10:52 所属栏目:百科 来源:网络整理
导读:假如后台传到前台的数据格式是: [ {time:4,[{name:"技术响应时长",value:50%}],{name:"排除故障时长",value:50%}]},{time:5,value:40%},value:60%}]},{time:6,value:70%},value:30%}]}] ? 那么前台创建曲线是 protected function getMEMPerfDataResult(even

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

[
 {time:4,[{name:"技术响应时长",value:50%}],{name:"排除故障时长",value:50%}]},{time:5,value:40%},value:60%}]},{time:6,value:70%},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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读