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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sotower/article/details/16964831

最近项目上用到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 { ... }
      

如果知道函数要设置其格式的数据类型,则可以指定 labelValuepreviousValue 参数的显式类型。


哎呀我去,这怎么用啊,还要传参数,这参数神马意思,晕了,第一次看到彻底懵了,找吧,找啊找啊找啊……终于,妹的,原来直接调用就行。

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

yField:Y轴显示的数据;

form :数据连接类型,curve为平滑的曲线;

displayName:轴的名称,图例中会使用该值;

lineStroke:线段颜色;

showDataEffect:显示数据的效果动画;

itemRenderer:坐标轴上数据点的小圆圈,在LineChart中定义showDataTips="true",数据点使用CircleItemRenderer做渲染,还有其他形状,如下


图例: 可控制显示的方向,不错,好东东。

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

差不多就这些,从头到尾我个人觉得乱乱的,后来弄出来思路就清晰很多,在Debug面前,神马困难都不是问题。
感谢阅读,努力努力告别码农啦。加油,向着远方,前进!

展开阅读全文

没有更多推荐了,返回首页