Flex双轴标注混合动态图表开发

对于企业级应用经常会开发一些动态的图表，基本的就不用说了Flex提供了多种图表，很方便大家完成任务。

这里我就说一下典型的双轴混合动态图表的开发，相信大家在开发过程当中都遇到过这样的问题。

 

此处完全使用AS来实现柱状图与线图的组合，对应的mxml代码也很简单。

 

[Bindable]public var charSource:ArrayCollection = new ArrayCollection([{category:"FT12 Nov",value:13429,value1:56},{category:"FT12 Dec",value:13355,value1:32},{category:"FT12 Jan",value:13117,value1:79},{category:"FT12 Q1",value:39900,value1:41},{category:"FT12 Feb",value:13975,value1:10},{category:"FT12 Mar",value:15137,value1:35},{category:"FT12 Apr",value:15362,value1:90},{category:"FT12 Q2",value:44474,value1:61}]);[Bindable]public var time:Timer = new Timer(1000); 

 

var testChart:ColumnChart = new ColumnChart();
				

//				//定义柱对象
				var columS:ColumnSeries = new ColumnSeries();
				columS.displayName = "value";
				columS.yField = "value";

				var seffect:SeriesInterpolate = new SeriesInterpolate();
				seffect.duration = 1000;
				seffect.target = columS;
				columS.addEventListener(Event.ADDED_TO_STAGE,function swqq(e:Event):void
				{
					//播放一个效果
					seffect.play();
				});
				//定义线对象
				var lineS:LineSeries = new LineSeries();
				lineS.displayName = "value1";
				lineS.yField = "value1";
				
				//定义左显示轴刻度
				var vAxisLeft:LinearAxis = new LinearAxis();
				vAxisLeft.interval = 200;
				columS.verticalAxis = vAxisLeft;
				
				//定义类别显示
				var ha:CategoryAxis = new CategoryAxis();
				ha.categoryField = "category";
				
				//定义右显示轴刻度
				var vAxisRight:LinearAxis = new LinearAxis();
				lineS.verticalAxis = vAxisRight;
				
				//左轴刻度渲染及配置
				var renderLift:AxisRenderer = new AxisRenderer()
				renderLift.axis = vAxisLeft;
				renderLift.placement = "left";
				
				//右轴刻度渲染及配置
				var renderRight:AxisRenderer = new AxisRenderer()
				renderRight.axis = vAxisRight;
				renderRight.placement = "right";
				renderRight.labelFunction = customASLabelFunction;
				
				
				//ColumChar对象属性配置
				testChart.horizontalAxis = ha;
				testChart.verticalAxisRenderers = [renderLift,renderRight];
				testChart.dataTipFunction = customDataTipFunction;
				testChart.series = [columS,lineS];
				testChart.dataProvider = charSource;
				testChart.showDataTips = true;
				testChart.width = 600;		
				group.addElement(testChart);

 

public function customASLabelFunction(axisRenderer:IAxisRenderer, label:String):String{
				return label+"%";
			}
			
			public function customDataTipFunction(hitData:HitData):String
			{
				var tempString:String = hitData.element is ColumnSeries?ColumnSeries(hitData.element).displayName:LineSeries(hitData.element).displayName;
				if(tempString == "value")
				{
					return tempString+"\n"+hitData.item.value;
				}
				return tempString+"\n"+hitData.item.value1+"%";
			}

 

protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				time.addEventListener(TimerEvent.TIMER,timer_Hander);
				time.start();
			}
			
			public function timer_Hander(event:TimerEvent):void
			{
				charSource.removeItemAt(0);
				var obj:Object = new Object();
				obj.category = "FY "+(event.currentTarget as Timer).currentCount;
				obj.value = Math.round(Math.random()*4000)+1000;
				obj.value1 = Math.round(Math.random()*100);
				charSource.addItem(obj);
			}

比较简单的实现代码相信根据这个能给你一个实现的思路来解决现实中的问题。

大家如果有问题欢迎一起交流学习。