关于LineChart使用上的一些体会与经验分享

最近项目上用到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 和 previousValue 参数的显式类型。

以任意一个数据点（有水平与垂直坐标文本）为例，第一个参数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"/>