最近專案上用到LineChart圖表元件，之前覺得表格類的東西，無非是配置資料，調整座標顯示這樣簡單的操作而已，而當自己真正著手進行的時候，發現還有一點點的棘手。

各種資源搬過來參考實踐，終於是搞定專案上的需求，也藉此機會分享給大家，如能對您的學習工作提供幫助，那也算沒有白白辛苦一回撒。

開始我們的表格之旅，GO！

首先，我們要知道表格的構成：資料、座標軸、座標系（資料點、連線構成）、圖例。

<s:VGroup id="onlineGroup" width="100%" height="100%" includeIn="onlineState" horizontalAlign="center">
		<mx:LineChart id="onlineChart" height="100%" width="100%"
					  paddingLeft="5" paddingRight="5" dataTipFunction="dataTipFunction"
					  showDataTips="true">
			
			<mx:horizontalAxis>
				<mx:LinearAxis minimum="0" maximum="30" interval="0" baseAtZero="false" autoAdjust="false" labelFunction="handleHorizontalAxisLabel"/>
			</mx:horizontalAxis>
			
			<mx:verticalAxis>
				<mx:LinearAxis baseAtZero="false" autoAdjust="true" labelFunction="handleVerticalAxisLabel"/>
			</mx:verticalAxis>
			
			<mx:series>
				<mx:LineSeries yField="totalNumber" form="curve" displayName="{lastMonthDisplayName}" lineStroke="{green}" 
						showDataEffect="{slideIn}"
						itemRenderer="mx.charts.renderers.CircleItemRenderer" dataProvider="{onlineLastAC}"/>
				<mx:LineSeries yField="totalNumber" form="curve" displayName="{currentMonthDisplayName}" lineStroke="{red}" 
						showDataEffect="{slideIn}"
						itemRenderer="mx.charts.renderers.CircleItemRenderer" dataProvider="{onlineCurrentAC}"/>
			</mx:series>
		</mx:LineChart>
		
		<mx:Legend dataProvider="{onlineChart}" direction="horizontal"/>
	</s:VGroup>
 

資料：本例所顯示的是同一個折線圖上有兩條資料線，因此資料來源就繫結到LineSeries上，即onlineLastAC、onlineCurrentAC兩個不同的ArrayCollection，也可以是其他資料來源，具體請參考API文件。

座標軸：本例水平和垂直座標軸都採用的LinearAxis，根據API文件介紹還有DateTimeAxis， LogAxis，CategoryAxis三種座標軸。

<mx:horizontalAxis>
<mx:LinearAxis minimum="0" maximum="30" interval="0" baseAtZero="false" autoAdjust="false" labelFunction="handleHorizontalAxisLabel"/>
</mx:horizontalAxis>
 

關於labelFunction的使用，一直很迷惑，凡事就怕認真啊，你就跟它較勁，啃透就好啃啦。

老辦法，看API介紹，Google例項，如下：

呼叫以設定軸值的格式，使其顯示為標籤。labelFunction 包含以下簽名：

      function function_name(labelValue:Object, previousValue:Object, axis:IAxis):String { ... }
      

如果知道函式要設定其格式的資料型別，則可以指定 labelValue

以任意一個數據點（有水平與垂直座標文字）為例，第一個引數labelValue是當前座標軸顯示的文字，第二個引數previousValue是前一個座標文字，最後一個是座標系，本例中也就是LinearAxis啦。

API中最後一句話就是如果知道座標軸資料型別，可以不適用Object，如本例中，適用的就是String型別。


座標系：資料點，連線。根據資料來源、座標軸可以確定顯示的資料點個數，連線即為資料點之間的線，有多種型別供選擇，弧線、直線、垂直水平等。

<mx:LineSeries yField="totalNumber" form="curve" displayName="{lastMonthDisplayName}" lineStroke="{green}" 
		showDataEffect="{slideIn}"
		itemRenderer="mx.charts.renderers.CircleItemRenderer" dataProvider="{onlineLastAC}"/>

form ：資料連線型別，curve為平滑的曲線；

displayName:軸的名稱，圖例中會使用該值；

lineStroke：線段顏色；

showDataEffect：顯示資料的效果動畫；

itemRenderer：座標軸上資料點的小圓圈，在LineChart中定義showDataTips="true"，資料點使用CircleItemRenderer做渲染，還有其他形狀，如下


圖例： 可控制顯示的方向，不錯，好東東。

<mx:Legend dataProvider="{onlineChart}" direction="horizontal"/>