iOS 折线图（1）

新建一个基于UIView的类

//
//  LineGraph.h
//  LineChart
//
//  Created by 马家俊 on 17/3/20.
//  Copyright © 2017年 MJJ. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface LineGraph : UIView
@property (nonatomic, strong) NSArray* pointArray;      //传入的point数组
@property (nonatomic, strong) NSArray* XArray;          //传入的X轴数据数组
@property (nonatomic, strong) NSArray* YArray;          //传入的Y轴数据数组
@property (nonatomic, assign) CGFloat MaxX;             //X轴最大值
@property (nonatomic, assign) CGFloat MaxY;             //Y轴最大值
@property (nonatomic, assign) UIColor*  lineColor;      //线条颜色
@property (nonatomic, strong) NSString* xUnit;          //X轴单位
@property (nonatomic, strong) NSString* yUnit;          //Y轴单位
@end

#import "LineGraph.h"

#define defaultX    18
#define defalutY    18
@implementation LineGraph

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        
    }
    return self;
}

在drawRect方法中绘制折线图的XY轴

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);
    CGContextMoveToPoint(context, defaultX, defalutY);
    CGContextAddLineToPoint(context, defaultX, rect.size.height - defalutY);
    CGContextAddLineToPoint(context,rect.size.width - defaultX, rect.size.height - defalutY);
    CGContextStrokePath(context);
}

添加XY轴的数据及虚线

-(void)drawXYAndVirtualLine
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    for (int i = 0; i<self.XArray.count; i++) {
        CGFloat width = (self.frame.size.width - defaultX*2)/self.XArray.count;
        UILabel * xLab = [[UILabel alloc]initWithFrame:CGRectMake(width*i+defaultX,self.frame.size.height-defalutY,width,defalutY)];
        xLab.text = self.XArray[i];
        xLab.textColor = [UIColor blackColor];
        xLab.font = [UIFont systemFontOfSize:10];
        [self addSubview:xLab];
        
        if (i!=0) {
            // 设置线条的样式
            CGContextSetLineCap(context, kCGLineCapRound);
            // 绘制线的宽度
            CGContextSetLineWidth(context, 1.0);
            // 线的颜色
            CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
            // 开始绘制
            CGContextBeginPath(context);
            // 设置虚线绘制起点
            CGContextMoveToPoint(context, xLab.frame.origin.x, self.frame.size.height-defalutY);
            // lengths的值｛10,10｝表示先绘制10个点，再跳过10个点，如此反复
            CGFloat lengths[] = {5,5};
            // 虚线的起始点
            CGContextSetLineDash(context, 0, lengths,2);
            // 绘制虚线的终点
            NSLog(@"%lf",self.frame.size.height);
            CGContextAddLineToPoint(context, xLab.frame.origin.x,defalutY);
            // 绘制
            CGContextStrokePath(context);
        }
    }
    
    //绘制Y轴
    for (int i = 0; i<self.YArray.count; i++) {
        CGFloat width = (self.frame.size.height - defalutY*2)/self.XArray.count;
        UILabel * xLab = [[UILabel alloc]initWithFrame:CGRectMake(0,self.frame.size.height-defalutY*2-width*i,width,defalutY)];
        xLab.text = self.YArray[i];
        xLab.textColor = [UIColor blackColor];
        xLab.font = [UIFont systemFontOfSize:10];
        [self addSubview:xLab];
    }
}

下班下班，回头再说，先这样....

屏幕快照 2017-03-23 17.29.31 1.png

iOS 折线图（1）

推荐阅读更多精彩内容