IOS折线统计图

做项目要统计商品的销售情况,美工那边给了效果图,自己就按照效果图自定义了一个ScrollView。整体效果不错,在做的过程中遇到的问题也记录一下。

现在这个还有许多优化的地方:

1.一个表中只能画一个折线

2.目前的要求最小值为0,没考虑负数的最小值

//
//  LineChartView.h
//  CAShapeLayerTest
//
//  Created by Mkil on 3/31/16.
//  Copyright © 2016 Mkil. All rights reserved.
//

#import <UIKit/UIKit.h>



#define SPACING 70.0        //设置两点的水平间距
#define BOTTOMSPACING 60.0  //底部距离
#define LEFTSPACING 80.0   //左边距离

//文本类型
typedef NS_ENUM(NSInteger, TitleType) {
    TitleForX,
    TitleForPoint,
    TitelForNormal
};

@class LineChartView;

@protocol LineChartDataSource  <NSObject>
@required

//折点数量
- (NSInteger)numberForChart:(LineChartView *)chart;

//折点数值
- (float)chart:(LineChartView *)chart valueAtIndex:(NSInteger)index;

@optional

//X轴坐标是否有背景色
-(BOOL)chart:(LineChartView *)chart backGroundColorAtXPointIndex:(NSInteger)index;

//X 轴的标题
-(NSString *)chart:(LineChartView *)chart titleForXLabelAtIndex:(NSInteger)index;


@end

@interface LineChartView : UIScrollView

@property(nonatomic, assign)id<LineChartDataSource> dataSource;
@property (nonatomic, assign) NSInteger maxValue;

@end

//
//  LineChartView.m
//  CAShapeLayerTest
//
//  Created by Mkil on 3/31/16.
//  Copyright © 2016 Mkil. All rights reserved.
//

#import "LineChartView.h"

#define textDColor [UIColor colorWithRed:255/255.0 green:164/255.0 blue:102/255.0 alpha:1]
#define line228Color [UIColor colorWithRed:228/255.0 green:228/255.0 blue:228/255.0 alpha:1]

@interface  LineChartView ()

@property (nonatomic, strong) CAShapeLayer *linePath;
@property (nonatomic, assign) NSInteger count;          //点数
@property (nonatomic, assign) CGFloat avgHeight;        //刻度

@end

@implementation LineChartView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        _linePath = [CAShapeLayer layer];
        _linePath.lineCap = kCALineCapRound;
        _linePath.lineJoin = kCALineJoinBevel;
        _linePath.lineWidth = 2;
        _linePath.fillColor = [UIColor clearColor].CGColor;
        
        self.bounces=NO;
//        self.backgroundColor = [UIColor lightGrayColor];
        self.showsHorizontalScrollIndicator=NO;
        self.showsVerticalScrollIndicator=NO;
    }
    return self;
}

//点数
-(NSInteger)count
{
    return [_dataSource numberForChart:self];
}

//刻度
-(CGFloat)avgHeight
{
    CGFloat height=self.frame.size.height;
    _avgHeight=(height-40-20)/self.maxValue;
    return _avgHeight;
}

- (void)drawRect:(CGRect)rect
{
    
    [super drawRect:rect];
    
    NSInteger count = [self.layer.sublayers count];
    for (int i = 0; i < count ; i ++) {
        
        [self.layer.sublayers[i] removeFromSuperlayer];
    }
    
    //不能通过for in 删除  was mutated while being enumerated 遍历的时候不能删除
    //    for (CALayer *layer in self.layer.sublayers) {
    //        [layer removeFromSuperlayer];
    //    }
    
    if (self.count <= 0) {
        
        return;
    }
    
    [self.layer addSublayer:_linePath];
     self.contentSize=CGSizeMake((self.count)*SPACING + LEFTSPACING, self.bounds.size.height);
   
    //画横线
    [self drawTransverseLineHeight:self.frame.size.height - 40];
    [self drawTransverseLineHeight:20];
    [self drawTransverseLineHeight:20 + (self.frame.size.height - 40 - 20)/2.0];
    
    //画文字
    CGPoint point = CGPointMake(40, 20);
    
    [self drawText:[NSString stringWithFormat:@"%ld",self.maxValue] withPoint:point withType:TitelForNormal withColor:line228Color withIndex:1];
    point = CGPointMake(40, 20 + (self.frame.size.height - 40 - 20)/2.0);
    [self drawText:[NSString stringWithFormat:@"%ld",self.maxValue/2] withPoint:point withType:TitelForNormal withColor:line228Color withIndex:1];
    //画折线
    [self drawBrokenLine];
    
}

//画横线
- (void)drawTransverseLineHeight:(CGFloat) height
{
    CAShapeLayer *layer=[CAShapeLayer layer];
    layer.lineCap=kCALineCapRound;
    layer.lineJoin=kCALineJoinBevel;
    layer.lineWidth=0.1;
    layer.fillColor=[UIColor clearColor].CGColor;
    [self.layer addSublayer:layer];
    
    UIBezierPath *transverseLine = [UIBezierPath bezierPath];
    [transverseLine moveToPoint:CGPointMake(20, height)];
    [transverseLine addLineToPoint:CGPointMake(self.contentSize.width - 20, height)];
    
    layer.path = transverseLine.CGPath;
    layer.strokeColor = [UIColor blackColor].CGColor;
}

//画竖线
-(void)drawVerticalLineStartPoint:(CGPoint) startPoint withEndPoint:(CGPoint) endPoint withColor:(UIColor *)color
{
    CAShapeLayer *layer=[CAShapeLayer layer];
    layer.lineCap=kCALineCapRound;
    layer.lineJoin=kCALineJoinBevel;
    layer.lineWidth=0.5;
    layer.fillColor=[UIColor clearColor].CGColor;
    [self.layer addSublayer:layer];
    
    UIBezierPath *bottomLinePath=[UIBezierPath bezierPath];
    [bottomLinePath moveToPoint:startPoint];
    [bottomLinePath addLineToPoint:endPoint];
    layer.path=bottomLinePath.CGPath;
    layer.strokeColor=[UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.00f].CGColor;
}

//画文字

-(void)drawText:(NSString *)text withPoint:(CGPoint)point withType:(TitleType) type withColor:(UIColor *)textColor withIndex:(NSInteger)index
{
    
    CGRect frame=[text boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10.f]} context:nil];
    
    UILabel *label=[[UILabel alloc]init];
    
    CGPoint pointForValueString=CGPointMake(point.x-15, point.y);
    if (pointForValueString.y+frame.size.height>self.frame.size.height-50) {
        pointForValueString.y=point.y-frame.size.height-20;
    }
    else if (pointForValueString.y-frame.size.height<0)
    {
        pointForValueString.y=point.y+frame.size.height-20;
    }
    label.frame=CGRectMake(pointForValueString.x - 15, pointForValueString.y, 60, 30);
    label.textAlignment=NSTextAlignmentCenter;
    if (type==TitleForPoint) {
        label.textColor=textColor;
        label.font=[UIFont systemFontOfSize:13.f];
    }
    else if (type==TitleForX)
    {
        label.frame=CGRectMake(pointForValueString.x, pointForValueString.y+15, 30,30);
        if (_dataSource&&[_dataSource respondsToSelector:@selector(chart:backGroundColorAtXPointIndex:)]) {
            if ([_dataSource chart:self backGroundColorAtXPointIndex:index]) {
                label.backgroundColor=textColor;
                label.textColor=[UIColor whiteColor];
                label.layer.cornerRadius=label.bounds.size.width/2;
                label.clipsToBounds=YES;
            }
            else
            {
                label.backgroundColor=[UIColor whiteColor];
                label.textColor=[UIColor colorWithRed:0.298f green:0.298f blue:0.298f alpha:1.00f];
                
            }
            
        }
        else
        {
            label.textColor=[UIColor colorWithRed:0.298f green:0.298f blue:0.298f alpha:1.00f];
        }
        label.font=[UIFont systemFontOfSize:14.f];
    }else if (type == TitelForNormal)
    {
        label.textColor=textColor;
        label.font=[UIFont systemFontOfSize:18.f];
    }
    label.text=text;
    [self addSubview:label];
}

- (void)drawBrokenLine
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    for (int i=0; i < self.count; i++) {
        
        CGFloat value = [_dataSource chart:self valueAtIndex:i];
        CGPoint point = [self pointWithValue:value index:i];
    
        //画竖线
        if (i == 0) {
            
            [self drawVerticalLineStartPoint:CGPointMake(LEFTSPACING, self.frame.size.height-40) withEndPoint:CGPointMake(LEFTSPACING, self.frame.size.height - 30) withColor:
             [UIColor blueColor]];
            
            [self drawVerticalLineStartPoint:CGPointMake(LEFTSPACING, self.frame.size.height-40) withEndPoint:point withColor:
             [UIColor blueColor]];
        }else{
            
            [self drawVerticalLineStartPoint:CGPointMake(i*SPACING + LEFTSPACING, self.frame.size.height-40) withEndPoint:CGPointMake(i*SPACING + LEFTSPACING, self.frame.size.height - 30) withColor:
             [UIColor blueColor]];
            
            [self drawVerticalLineStartPoint:CGPointMake(i*SPACING + LEFTSPACING, self.frame.size.height-40) withEndPoint:point withColor:
             [UIColor blueColor]];
        }
        
        //画文字
        NSString *valueString=[NSString stringWithFormat:@"%ld",(long)value];
        [self drawText:valueString withPoint:point withType:TitleForPoint withColor:textDColor withIndex:i];
        //画X轴
        if (_dataSource&&[_dataSource respondsToSelector:@selector(chart:titleForXLabelAtIndex:)]) {
            NSString *xstring=[_dataSource chart:self titleForXLabelAtIndex:i];
            [self drawText:xstring withPoint:CGPointMake(point.x, self.bounds.size.height-10) withType:TitleForX withColor:line228Color withIndex:i];
        }
        
        //画折线
        //贝塞尔曲线
        if (i==0) {
            [path moveToPoint:point];
        }else{
            [path addLineToPoint:point];
        }

    }
    
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle=kCGLineJoinRound;
    path.lineWidth=0.5;
    [[UIColor redColor]setStroke];
    CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 2;
    pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue=[NSNumber numberWithFloat:1.0f];
    pathAnimation.autoreverses=NO;
    _linePath.path=path.CGPath;
    _linePath.strokeColor=textDColor.CGColor;
    [_linePath addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    _linePath.strokeEnd = 1.0;

}


//根据索引计算出折点的位置
-(CGPoint)pointWithValue:(NSInteger)value index:(NSInteger)index
{
    CGFloat height=self.frame.size.height;
    
    if (index == 0) {
        
        return CGPointMake(LEFTSPACING, height-value*self.avgHeight-40);
    }
    return  CGPointMake(index*SPACING + LEFTSPACING, height-value*self.avgHeight-40);
}

@end

调用：

//
//  ViewController.m
//  CAShapeLayerTest
//
//  Created by Mkil on 3/31/16.
//  Copyright © 2016 Mkil. All rights reserved.
//

#import "ViewController.h"
#import "LineChartView.h"

@interface ViewController ()<LineChartDataSource>
@property (nonatomic ,strong) NSArray *points;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    _points=@[@3000,@400,@2500,@3500,@1800,@2800,@900,@3400,@2900,@3100,@3000,@2500];
    
    LineChartView *lineChart=[[LineChartView alloc]initWithFrame:CGRectMake(0, 100, self.view.bounds.size.width, 300)];
    
    lineChart.dataSource=self;
    lineChart.maxValue = 4000;
    
    [self.view addSubview:lineChart];
    
}


-(NSInteger)numberForChart:(LineChartView *)chart
{
    return _points.count;
}
-(float)chart:(LineChartView *)chart valueAtIndex:(NSInteger)index
{
    
    return [[_points objectAtIndex:index] floatValue];
}

-(NSString *)chart:(LineChartView *)chart titleForXLabelAtIndex:(NSInteger)index
{
    return [NSString stringWithFormat:@"%ld",index*2];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

效果：