近日，客戶在原折線報表的基礎上又提出了需要展示兩個緯度的資料需求。

而且是雙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;
 

這樣一個雙軸的折線圖就出來了。