动态构建双轴的FLEX报表

近日，客户在原折线报表的基础上又提出了需要展示两个纬度的数据需求。

而且是双Y轴指标。所以花了点功夫写了一个小DOME。

废话不多，上代码。

我们先定义一个数据源。

var jsonStr1:String='{"chartInfo":[{"ptitle":"PieChart示例","xName":"姓名","yName":"时间","valueUnit":"天"}],'+
					'"data":[{"HB":-17.94,"TB":711.8,"COMPANY_ID":"北京","TS_COUNT":500798},'+
					'{"HB":-19.38,"TB":61.32,"COMPANY_ID":"广东","TS_COUNT":2152220},'+
					'{"HB":23.45,"TB":1082.3,"COMPANY_ID":"上海","TS_COUNT":565910 },'+
					'{"HB":-2.83,"TB":976.41,"COMPANY_ID":"天津","TS_COUNT":289651 },'+
					'{"HB":8.33,"TB":625.69,"COMPANY_ID":"重庆","TS_COUNT":453750 },'+
					'{"HB":-6.68,"TB":768.7,"COMPANY_ID":"辽宁","TS_COUNT":922836 },'+
					'{"HB":6.4,"TB":193.79,"COMPANY_ID":"江苏","TS_COUNT":1047326 },'+
					'{"HB":-20.85,"TB":-7.88,"COMPANY_ID":"湖北","TS_COUNT":700200 },'+
					'{"HB":-0.14,"TB":841.24,"COMPANY_ID":"四川","TS_COUNT":329885 },'+
					'{"HB":-4.43,"TB":1013.8,"COMPANY_ID":"陕西","TS_COUNT":563092 },'+
					'{"HB":252.06,"TB":234.48,"COMPANY_ID":"河北","TS_COUNT":217477 },'+
					'{"HB":-16.57,"TB":442.49,"COMPANY_ID":"山西","TS_COUNT":672172 },'+
					'{"HB":25.75,"TB":-19.9,"COMPANY_ID":"河南","TS_COUNT":168895 },'+
					'{"HB":21.16,"TB":178.73,"COMPANY_ID":"吉林","TS_COUNT":1071927 },'+
					'{"HB":-36.24,"TB":47.67,"COMPANY_ID":"黑龙江","TS_COUNT":370784 },'+
					'{"HB":24.61,"TB":178.15,"COMPANY_ID":"内蒙古","TS_COUNT":23579 },'+
					'{"HB":-16.33,"TB":2738.08,"COMPANY_ID":"山东","TS_COUNT":912839 },'+
					'{"HB":-2.02,"TB":1164.05,"COMPANY_ID":"安徽","TS_COUNT":761778 },'+
					'{"HB":9.64,"TB":136.87,"COMPANY_ID":"浙江","TS_COUNT":1294851 },'+
					'{"HB":-19.93,"TB":241.24,"COMPANY_ID":"福建","TS_COUNT":526767 },'+
					'{"HB":-14.78,"TB":929.68,"COMPANY_ID":"湖南","TS_COUNT":742834 },'+
					'{"HB":-9.74,"TB":1738.84,"COMPANY_ID":"广西","TS_COUNT":1048909 },'+
					'{"HB":44.73,"TB":145.85,"COMPANY_ID":"江西","TS_COUNT":285494 },'+
					'{"HB":28.07,"TB":2757.21,"COMPANY_ID":"贵州","TS_COUNT":1005768 },'+
					'{"HB":678.84,"TB":945.37,"COMPANY_ID":"云南","TS_COUNT":418095 },'+
					'{"HB":32.87,"TB":1503.92,"COMPANY_ID":"西藏","TS_COUNT":15542 },'+
					'{"HB":-7.32,"TB":42.62,"COMPANY_ID":"海南","TS_COUNT":53241 },'+
					'{"HB":72.93,"TB":32.44,"COMPANY_ID":"甘肃","TS_COUNT":92703 },'+
					'{"HB":-12.07,"TB":583.65,"COMPANY_ID":"宁夏","TS_COUNT":48471 },'+
					'{"HB":5.24,"TB":3894.36,"COMPANY_ID":"青海","TS_COUNT":88595 },'+
					'{"HB":-18.43,"TB":646.61,"COMPANY_ID":"新疆","TS_COUNT":228536}]}';  
				

然后就是相关具体代码实现

// 将后台传的json数据转换一下
				var objdata:Object=JSON.decode(jsonStr1);
				// 将数据转换为FLEX识别的数组格式
				var arr:Array = (objdata.data as Array);
				var obj:Object = null;
				// 遍历数据，封装到chartDataSouse:ArrayCollection。
				// 在图标中数据源ArrayCollection相比较我熟悉一些
				// 也可以根据自己的需要换为别的类型，例如：xml
				for(var i:int=0;i<arr.length;i++){
					obj = new Object();
					obj.HB = arr[i].HB;
					obj.TB = arr[i].TB;
					obj.COMPANY_ID = arr[i].COMPANY_ID;
					obj.TS_COUNT = arr[i].TS_COUNT;
					chartDataSouse.addItem(obj);
				}
				
				columnChart.percentWidth=100;
				columnChart.percentHeight=100;
				
				// 定义X轴数据
				var ca:CategoryAxis = new CategoryAxis();
				// 设置数据来源
				ca.dataProvider = chartDataSouse;
				// 设置数据取值对象
				ca.categoryField = "COMPANY_ID";
				// 柱状图X周数据
				columnChart.horizontalAxis = ca;
				
				
				// 左边Y轴取值,即投诉总量 这里也让flex自己分配
				//var leftYzhou:LinearAxis = new LinearAxis();
				//leftYzhou.maximum = 2152220;
				//leftYzhou.minimum = 10000;
				//columnChart.verticalAxis = leftYzhou;
				
				var myLineSeries1:Array=new Array();
				
				columnSeries.dataProvider = chartDataSouse;
				columnSeries.xField = "COMPANY_ID";
				columnSeries.yField = "TS_COUNT";
				columnSeries.displayName = "投诉总量";
				
				myLineSeries1.push(columnSeries);
				
				columnChart.series = myLineSeries1;
				
				// 如果需要设置右边Y轴的数据，就如下，如果不需要就让flex自动选择
				//var rightYzhou:LinearAxis = new LinearAxis();
				//rightYzhou.maximum = 700;
				//rightYzhou.minimum = -100;
				//columnChart.secondVerticalAxis = rightYzhou;
				
				
				
				var myLineSeries:Array=new Array();
				
				lineSeries.dataProvider = chartDataSouse;
				lineSeries.xField = "COMPANY_ID";
				lineSeries.yField = "TB";
				lineSeries.displayName = "同比";
				
				myLineSeries.push(lineSeries);
				
				var lineSeries2:LineSeries = new LineSeries();
				lineSeries2.dataProvider = chartDataSouse;
				lineSeries2.xField = "COMPANY_ID";
				lineSeries2.yField = "HB";
				lineSeries2.displayName = "环比";
				
				myLineSeries.push(lineSeries2);
				
				columnChart.secondSeries = myLineSeries;
				columnChart.showDataTips = true;
				chartPanel.addChild(columnChart);
				
				
				columnChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);
				columnChart.addEventListener(MouseEvent.MOUSE_MOVE,moveLineChart);
				chartLegend.dataProvider=columnChart;

这样一个双轴的折线图就出来了。