公司项目中的新需求中有个统计图标的模块，就参考别人的代码自己琢磨修改了下，效果图如下：

Y轴值是5等分的，X轴的值个数理论上是无限的

chart.gif

定义

定义很简单：就定义了一个类 MineAgencyChartView

外部属性、接口

定义了几个title的属性以及x轴的数据数组、值的数据数组 一个切换图表数据的api 

外部调用

外部调用

赋值几个属性值，再调用 -(void)reDraw; 即可；

实现

说明一下：布局是用的Masnory，代码中也有很多自己定义的宏

几个titleLabel、scorllerView的布局：

基本布局-1

基本布局-2

主要实现是在 -(void)reDraw；中

绘制-1

考虑到会有数据切换的情况，所以把subViews和subLayers都给清理了，

NSInteger maxValue = [[self.valueArr valueForKeyPath:@"@max.integerValue"] integerValue]; //取出最大值

    NSInteger y_maxValue = (maxValue%10) ? ((maxValue/10 + 1) * 10) : maxValue; // 换算出y轴中的最大值

这里是通过值数据，拿出最大值，再把最大值取到 10 的整数。下面画Y轴的时候把这个值5等分，我这么做只是为了Y轴顶部数据好看点。仅供参考（并且这么做的话就没必要定义Y轴的数据数组了，灵活变化）。

绘制-2

这里遍历x轴数组数据，画竖线，这里画线的话用的是UIView，这里有点不好，本来是想用贝塞尔线来画的，但是布局用的是Masnory，Frame数据获取不到，也没有用过Masnory画贝塞尔线（不知道可不可以），所以就用UIView来替代了。创建底部label，赋值数据。

绘制-3

Y轴5等分 “绘制-1”  中换算出的y轴最大值，画线同上，创建y轴label，赋值数据。

绘制-4

遍历值数组，根据值和y轴最大值的比例，用Masonry于y轴底部横线做约束，确定点的位置，在点的上面用label标出值。

绘制-5

[self layoutIfNeeded]; 这里得出点的frame. 用贝塞尔曲线连起来，配合基础动画做一个串联的动画效果。后面的代码遮罩层动画同样是基础动画应用，就不说明了，感觉有点冗余了。

总结

这里记录的话只是我的实现，只提供一个思路，供参考。方便以后自己查看。

若有问题请联系我：

    邮箱：13048914897@163.com