美文网首页iOS学习资料
iOS 折线图(1)

iOS 折线图(1)

作者: 马大俊不是啥好人 | 来源:发表于2017-03-23 17:30 被阅读142次

    新建一个基于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)

        本文链接:https://www.haomeiwen.com/subject/jijtottx.html