关于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}"/>

yField：Y轴显示的数据；

form ：数据连接类型，curve为平滑的曲线；

displayName:轴的名称，图例中会使用该值；

lineStroke：线段颜色；

showDataEffect：显示数据的效果动画；

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



图例： 可控制显示的方向，不错，好东东。

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

差不多就这些，从头到尾我个人觉得乱乱的，后来弄出来思路就清晰很多，在Debug面前，神马困难都不是问题。

感谢阅读，努力努力告别码农啦。加油，向着远方，前进！