iOS - 动态折线图绘制

前言:

最近公司在蓝牙设备,需要按照通过设备读取的数据来实时画出折线图,参考了很多资料,然后自己封装了一套画折线图的方法(支持画封闭图形,四边形,三角形),如果有需要的小伙伴可以拿去,效果图如下:

Untitled001.gif Untitled.gif Untitled002.gif

首先

我自定义了一个专门真是折线图的 View ,我新建的时候用了 xib, 当然不用也是可以的只需要自己手动调一下就好了

Paste_Image.png

具体实现方法如下:

- SportLineView.h

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSUInteger, ChartType) {
    /** 四边形*/
    QuadrilateralType = 1,
    /** 三角形 */
    TriangleType = 2
};

@interface SportLineView : UIView
// x轴值
@property (nonatomic, copy) NSArray *xValues;

// y轴值
@property (nonatomic, copy) NSArray *yValues;

// 绘图数组
@property (strong, nonatomic) NSMutableArray *pointArray;

// 是否显示方格
@property (nonatomic, assign) bool isShowLine;

// 初始化折线图所在视图
+ (instancetype)lineChartViewWithFrame:(CGRect)frame;
// 画图表
- (void)drawChartWithLineChart;

// 封闭图形类型
@property (nonatomic, assign) ChartType type;

// 即时更新折线图
- (void)exchangeLineAnyTime;

// 一类肌疲劳度
- (CGFloat)getFirstMuscleLevel;
// 二类肌疲劳度
- (CGFloat)getSecondMuscleLevel;

@end

- SportLineView.m

#import "SportLineView.h"

static CGRect myFrame;
static int count;   // 点个数，x轴格子数
static int yCount;  // y轴格子数
static CGFloat everyX;  // x轴每个格子宽度
static CGFloat everyY;  // y轴每个格子高度
static CGFloat maxY;    // 最大的y值
static CGFloat allH;    // 整个图表高度
static CGFloat allW;    // 整个图表宽度
#define kMargin 30

@interface SportLineView()
@property (weak, nonatomic) IBOutlet UIView *bgView;
@property (strong, nonatomic) NSMutableArray *xLabels;

@end

@implementation SportLineView

+ (instancetype)lineChartViewWithFrame:(CGRect)frame{
    SportLineView *lineChartView = [[NSBundle mainBundle] loadNibNamed:@"SportLineView" owner:self options:nil].lastObject;
    lineChartView.frame = frame;
    
    myFrame = frame;
    
    return lineChartView;
}

#pragma mark - 计算

- (void)doWithCalculate{
    if (!self.xValues || !self.xValues.count || !self.yValues || !self.yValues.count) {
        return;
    }
    // 移除多余的值，计算点个数
    if (self.xValues.count > self.yValues.count) {
        NSMutableArray * xArr = [self.xValues mutableCopy];
        for (int i = 0; i < self.xValues.count - self.yValues.count; i++){
            [xArr removeLastObject];
        }
        self.xValues = [xArr mutableCopy];
    }else if (self.xValues.count < self.yValues.count){
        NSMutableArray * yArr = [self.yValues mutableCopy];
        for (int i = 0; i < self.yValues.count - self.xValues.count; i++){
            [yArr removeLastObject];
        }
        self.yValues = [yArr mutableCopy];
    }
    
    count = (int)self.xValues.count;
    
    everyX = (CGFloat)(CGRectGetWidth(myFrame) - kMargin * 2) / count;
    
    // y轴最多分5部分
    yCount = count <= 10 ? count : 10;
    
    everyY =  (CGRectGetHeight(myFrame) - kMargin * 2) / yCount;
    
    maxY = CGFLOAT_MIN;
    for (int i = 0; i < count; i ++) {
        if ([self.yValues[i] floatValue] > maxY) {
            maxY = [self.yValues[i] floatValue];
        }
    }
    
    allH = CGRectGetHeight(myFrame) - kMargin * 2;
    allW = CGRectGetWidth(myFrame) - kMargin * 2;
}

#pragma mark - 画X、Y轴
- (void)drawXYLine{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(kMargin, kMargin / 2.0 - 5)];
    
    [path addLineToPoint:CGPointMake(kMargin, CGRectGetHeight(myFrame) - kMargin)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(myFrame) - kMargin / 2.0 + 5, CGRectGetHeight(myFrame) - kMargin)];
    
    // 加箭头
    [path moveToPoint:CGPointMake(kMargin - 5, kMargin/ 2.0 + 4)];
    [path addLineToPoint:CGPointMake(kMargin, kMargin / 2.0 - 4)];
    [path addLineToPoint:CGPointMake(kMargin + 5, kMargin/ 2.0 + 4)];
    
    [path moveToPoint:CGPointMake(CGRectGetWidth(myFrame) - kMargin / 2.0 - 4, CGRectGetHeight(myFrame) - kMargin - 5)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(myFrame) - kMargin / 2.0 + 5, CGRectGetHeight(myFrame) - kMargin)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(myFrame) - kMargin / 2.0 - 4, CGRectGetHeight(myFrame) - kMargin + 5)];
    
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor brownColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth = 2.0;
    
    [self.layer addSublayer:layer];
}

#pragma mark - 添加label
- (void)drawLabels{
    
    
    //Y轴
    for(int i = 0; i <= yCount; i ++){
        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, kMargin  + everyY * i - everyY / 2, kMargin - 1, everyY)];
        lbl.textColor = [UIColor blackColor];
        lbl.font = [UIFont systemFontOfSize:10];
        lbl.textAlignment = NSTextAlignmentRight;
        
        lbl.text = [NSString stringWithFormat:@"%d%%", (int)(maxY / yCount * (yCount - i)) ];
        
        [self addSubview:lbl];
    }
    
    // X轴
    for(int i = 1; i <= count; i ++){
        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(kMargin + everyX * i - everyX / 2, CGRectGetHeight(myFrame) - kMargin, everyX, kMargin)];
        
        lbl.textColor = [UIColor blackColor];
        lbl.font = [UIFont systemFontOfSize:12];
        lbl.textAlignment = NSTextAlignmentCenter;
        
        [self.xLabels addObject:lbl];
        // 如果起点不是0,计算横轴的坐标值
        NSValue *pointObj = [self.pointArray lastObject];
        CGPoint pointRestored = [pointObj CGPointValue];
        
        CGFloat maxX = pointRestored.x;
        int maxValueX = (int)maxX;
        CGFloat xfloat = maxX - maxValueX;
        if (xfloat > 0) {
            maxValueX += 1;
        }
        
//        NSValue *firstPointObj = [self.pointArray firstObject];
//        CGPoint firstPointRestored = [firstPointObj CGPointValue];
        
        if (maxValueX <= count) {
            lbl.text = [NSString stringWithFormat:@"%@", self.xValues[i - 1]];
        }else{
            lbl.text = [NSString stringWithFormat:@"%zd", maxValueX - count + i];
        }
        
        [self addSubview:lbl];
    }
    
}

#pragma mark - 画网格
- (void)drawLines{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 横线
    for (int i = 0; i < yCount; i ++) {
        [path moveToPoint:CGPointMake(kMargin , kMargin + everyY * i)];
        [path addLineToPoint:CGPointMake(kMargin + allW ,  kMargin + everyY * i)];
    }
    // 竖线
    for (int i = 1; i <= count; i ++) {
        [path moveToPoint:CGPointMake(kMargin + everyX * i, kMargin)];
        [path addLineToPoint:CGPointMake( kMargin + everyX * i,  kMargin + allH)];
    }
    
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor lightGrayColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth = 0.5;
    [self.layer addSublayer:layer];
    
}

#pragma mark - 画折线\曲线
- (void)drawFoldLineWithLineChart{

    
    UIBezierPath *path = [UIBezierPath bezierPath];

    NSValue *pointObj = [self.pointArray firstObject];
    CGPoint pointRestored = [pointObj CGPointValue];
    CGFloat xpoint = pointRestored.x;
    CGFloat ypoint = pointRestored.y;
    int maxValueX = count;
    
    CGFloat Xwidth = (CGFloat)(CGRectGetWidth(myFrame) - kMargin * 2);
    
    if (xpoint <= 0) {
        [path moveToPoint:CGPointMake(kMargin, kMargin + allH)];
    }else{
        // 如果起点不是0,计算横轴的坐标值
        
        NSValue *MaxpointObj = [self.pointArray lastObject];
        CGPoint MaxpointRestored = [MaxpointObj CGPointValue];
        
        CGFloat maxX = MaxpointRestored.x;
        maxValueX = (int)maxX;
        CGFloat xfloat = maxX - maxValueX;
        if (xfloat > 0) {
            maxValueX += 1;
        }
        
        if (maxValueX <= count) {
            [path moveToPoint:CGPointMake(kMargin + xpoint * Xwidth / count, kMargin + (1 - ypoint / maxY) * allH)];
            
        }else{
            for (int i = 1; i < self.pointArray.count; i ++) {
                NSValue *pointObj = self.pointArray[i];
                CGPoint pointRestored = [pointObj CGPointValue];
                
                
                if (pointRestored.x >= (maxValueX - count)) {
                    [path moveToPoint:CGPointMake(kMargin + (pointRestored.x - (maxValueX - count))* Xwidth / count, kMargin + (1 - pointRestored.y / maxY) * allH)];
                    i = (int)(self.pointArray.count + 1);
                    
                }
            }
        }
        
        
        
    }
    for (int i = 1; i < self.pointArray.count; i ++) {
        NSValue *pointObj = self.pointArray[i];
        CGPoint pointRestored = [pointObj CGPointValue];
        
        
        if (maxValueX <= count) {
            [path addLineToPoint:CGPointMake(kMargin + pointRestored.x* Xwidth / count, kMargin + (1 - pointRestored.y / maxY) * allH)];
        }else{
            if (pointRestored.x >= (maxValueX - count)) {
                [path addLineToPoint:CGPointMake(kMargin + (pointRestored.x - (maxValueX - count))* Xwidth / count, kMargin + (1 - pointRestored.y / maxY) * allH)];
            }
        }
    }
    
    if (self.pointArray.count == 0) {
        [path addLineToPoint:CGPointMake(kMargin, kMargin + allH)];
    }
    
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    
    [self.bgView.layer addSublayer:layer];
    
}

#pragma mark - 整合 画图表
- (void)drawChartWithLineChart{
    
    // 计算赋值
    [self doWithCalculate];
    
    // 画网格线
    if (self.isShowLine) {
        [self drawLines];
    }
    
    // 画X、Y轴
    [self drawXYLine];
    
    // 添加文字
    [self drawLabels];
    
    // 画封闭图形
    if (self.type == QuadrilateralType) {
        NSMutableArray *points = [NSMutableArray array];
        CGPoint point1 = CGPointMake(1.5, 0);
        NSValue *pointObj1 = [NSValue valueWithCGPoint:point1];
        [points addObject:pointObj1];
        
        CGPoint point2 = CGPointMake(2, 45);
        NSValue *pointObj2 = [NSValue valueWithCGPoint:point2];
        [points addObject:pointObj2];
        
        CGPoint point3 = CGPointMake(8, 45);
        NSValue *pointObj3 = [NSValue valueWithCGPoint:point3];
        [points addObject:pointObj3];
        
        CGPoint point4 = CGPointMake(8.5, 0);
        NSValue *pointObj4 = [NSValue valueWithCGPoint:point4];
        [points addObject:pointObj4];
        
        [self drawClosedQuadrilateralChartWithArray:points];
    }else if(self.type == TriangleType){
        
        for (int i = 0; i < 5; i ++) {
            NSMutableArray *points = [NSMutableArray array];
            CGPoint point1 = CGPointMake(2 * (i+ 1), 0);
            NSValue *pointObj1 = [NSValue valueWithCGPoint:point1];
            [points addObject:pointObj1];
            
            CGPoint point2 = CGPointMake(2 * (i+ 1) + 0.5, 100);
            NSValue *pointObj2 = [NSValue valueWithCGPoint:point2];
            [points addObject:pointObj2];
            
            CGPoint point3 = CGPointMake(2 * (i+ 1) + 1, 0);
            NSValue *pointObj3 = [NSValue valueWithCGPoint:point3];
            [points addObject:pointObj3];
            [self drawClosedQuadrilateralChartWithArray:points];
        }
    }
    
    
    
}
// 更新折线图, X轴坐标
- (void)exchangeLineAnyTime{
    // 计算赋值
    [self doWithCalculate];
    
    NSArray *layers = [self.bgView.layer.sublayers mutableCopy];
    
    for (CAShapeLayer *layer in layers) {
        [layer removeFromSuperlayer];
    }
    // 画折线
    [self drawFoldLineWithLineChart];
    
    [self exchangeXlabels];
}
- (void)exchangeXlabels{
    NSValue *pointObj = [self.pointArray lastObject];
    CGPoint pointRestored = [pointObj CGPointValue];
    
    CGFloat maxX = pointRestored.x;
    int maxValueX = (int)maxX;
    CGFloat xfloat = maxX - maxValueX;
    if (xfloat > 0) {
        maxValueX += 1;
    }
    
    if (maxValueX > count) {
        for (int i = 0; i < self.xLabels.count; i ++) {
            UILabel *label = self.xLabels[i];
            label.text = [NSString stringWithFormat:@"%zd", maxValueX - count + i + 1];
        }
    }
    
}

// 封闭图形
- (void)drawClosedQuadrilateralChartWithArray:(NSArray *)points{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat Xwidth = (CGFloat)(CGRectGetWidth(myFrame) - kMargin * 2);
    
    for (int i = 0; i < points.count; i ++) {
        NSValue *pointObj = points[i];
        CGPoint pointRestored = [pointObj CGPointValue];
        if (i == 0) {
            [path moveToPoint:CGPointMake(kMargin + pointRestored.x * Xwidth / count, kMargin + (1 - pointRestored.y / maxY) * allH)];
        }else{
            [path addLineToPoint:CGPointMake(kMargin + pointRestored.x * Xwidth / count, kMargin + (1 - pointRestored.y / maxY) * allH)];
        }
    }
    
    [path closePath];

    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor lightGrayColor].CGColor;
    layer.fillColor = SSColorA(255, 255, 155, 100.0).CGColor;
    
    [self.layer addSublayer:layer];
    
}
#pragma mark -- 一类肌疲劳度
- (CGFloat)getFirstMuscleLevel{
    
    CGPoint startPoint = [self exchangeXYValuePoint:CGPointMake(2, 40)];
    CGPoint endPoint = [self exchangeXYValuePoint:CGPointMake(7, 40)];
    
    CGFloat totalArea = (endPoint.x - startPoint.x) * endPoint.y;
    
    CGFloat trapezoidal = 0;
    for (int i = 0; i < self.pointArray.count; i ++) {
        NSValue *pointObj = self.pointArray[i];
        CGPoint pointRestored = [pointObj CGPointValue];
        
        
        if (pointRestored.x >= 2 && pointRestored.x <= 7) {
            
            NSValue *pointObj2 = self.pointArray[i + 1];
            CGPoint pointRestored2 = [pointObj2 CGPointValue];
            
            CGPoint point1 = pointRestored;
            CGPoint point2 = pointRestored2;
            
            CGFloat area = [self getTrapezoidalAreaWithPoint1:point1 poit2:point2];
            trapezoidal += area;
        }
    }
    
    // 计算肌力疲劳度
    
    CGFloat level = trapezoidal / totalArea;

    return level;
}
#pragma mark -- 二类肌疲劳度
- (CGFloat)getSecondMuscleLevel{
    CGPoint startPoint = [self exchangeXYValuePoint:CGPointMake(2, 0)];
    CGPoint endPoint = [self exchangeXYValuePoint:CGPointMake(3, 0)];
    CGPoint topPoint = [self exchangeXYValuePoint:CGPointMake(2.5, 100)];
    
    CGFloat triangle = (endPoint.x - startPoint.x) * topPoint.y * 0.5;
    CGFloat totalArea = 5 * triangle;
    
    CGFloat trapezoidal = 0;
    
    for (int i = 0; i < self.pointArray.count; i ++) {
        NSValue *pointObj = self.pointArray[i];
        CGPoint pointRestored = [pointObj CGPointValue];
       
        if (pointRestored.x >= 2 && pointRestored.x <= 3) {
            
            NSValue *pointObj2 = self.pointArray[i + 1];
            CGPoint pointRestored2 = [pointObj2 CGPointValue];
            
            CGPoint point1 = pointRestored;
            CGPoint point2 = pointRestored2;
            
            CGFloat area = [self getTrapezoidalAreaWithPoint1:point1 poit2:point2];
            trapezoidal += area;

        }else if (pointRestored.x >= 4 && pointRestored.x <= 5){
            NSValue *pointObj2 = self.pointArray[i + 1];
            CGPoint pointRestored2 = [pointObj2 CGPointValue];
            
            CGPoint point1 = pointRestored;
            CGPoint point2 = pointRestored2;
            
            CGFloat area = [self getTrapezoidalAreaWithPoint1:point1 poit2:point2];
            trapezoidal += area;
        }else if (pointRestored.x >= 6 && pointRestored.x <= 7){
            NSValue *pointObj2 = self.pointArray[i + 1];
            CGPoint pointRestored2 = [pointObj2 CGPointValue];
            
            CGPoint point1 = pointRestored;
            CGPoint point2 = pointRestored2;
            
            CGFloat area = [self getTrapezoidalAreaWithPoint1:point1 poit2:point2];
            trapezoidal += area;
        }else if (pointRestored.x >= 8 && pointRestored.x <= 9){
            NSValue *pointObj2 = self.pointArray[i + 1];
            CGPoint pointRestored2 = [pointObj2 CGPointValue];
            
            CGPoint point1 = pointRestored;
            CGPoint point2 = pointRestored2;
            
            CGFloat area = [self getTrapezoidalAreaWithPoint1:point1 poit2:point2];
            trapezoidal += area;
        }else if (pointRestored.x >= 10 && pointRestored.x <= 11){
            NSValue *pointObj2 = self.pointArray[i + 1];
            CGPoint pointRestored2 = [pointObj2 CGPointValue];
            
            CGPoint point1 = pointRestored;
            CGPoint point2 = pointRestored2;
            
            CGFloat area = [self getTrapezoidalAreaWithPoint1:point1 poit2:point2];
            trapezoidal += area;
        }
    }
    // 计算肌力疲劳度
    
    CGFloat level = trapezoidal / totalArea;
    
    return level;
}

// 计算两坐标点之间的梯形面积
- (CGFloat)getTrapezoidalAreaWithPoint1:(CGPoint)point1 poit2:(CGPoint)point2{
    
    CGPoint expoint1 = [self exchangeXYValuePoint:point1];
    CGPoint expoint2 = [self exchangeXYValuePoint:point2];
    
    CGFloat expoint1X = expoint1.x;
    CGFloat expoint1y = expoint1.y;
    
    CGFloat expoint2X = expoint2.x;
    CGFloat expoint2y = expoint2.y;
    
    CGFloat area = (expoint1y + expoint2y) * (expoint2X - expoint1X) * 0.5;
    
    return area;
}
// 根据一个点转换坐标值
- (CGPoint)exchangeXYValuePoint:(CGPoint)point{
    
    CGFloat Xwidth = (CGFloat)(CGRectGetWidth(myFrame) - kMargin * 2);

    CGPoint zeroPoint;
    zeroPoint.x = kMargin + 0 * Xwidth / count;
    zeroPoint.y =  kMargin + (1 - 0 / maxY) * allH;
    
    CGPoint linePoint;
    linePoint.x = kMargin + point.x * Xwidth / count - zeroPoint.x;
    linePoint.y = zeroPoint.y - ( kMargin + (1 - point.y / maxY) * allH );
    return linePoint;
}
#pragma mark -- 懒加载
- (NSMutableArray *)pointArray{
    if (!_pointArray) {
        _pointArray = [NSMutableArray array];
    }
    return _pointArray;
}
- (NSMutableArray *)xLabels{
    if (!_xLabels) {
        _xLabels = [NSMutableArray array];
    }
    return _xLabels;
}

@end

具体使用方法:

• 初始化:

 SportLineView *LCView = [SportLineView lineChartViewWithFrame:CGRectMake(10, 0, CGRectGetWidth([UIScreen mainScreen].bounds) - 20, self.topView.frame.size.height)];
    LCView.xValues = @[@1, @2, @3, @4, @5, @6, @7,@8, @9, @10];
    LCView.yValues = @[@10, @20, @30, @40, @50,@60, @70, @80,@90, @100];
    // 设置封闭图形的样式
    LCView.type = QuadrilateralType;
    self.LCView = LCView;
    LCView.isShowLine = YES;
    [LCView drawChartWithLineChart];
    [self.topView addSubview:LCView];

• 然后在接收数据的时候,调用实施更新的方法:

// 把点加入到数组中
CGPoint point = CGPointMake(x, y);
NSValue *pointObj = [NSValue valueWithCGPoint:point];
 [weakSelf.LCView.pointArray addObject:pointObj];

            for (int i = 0; i < weakSelf.LCView.pointArray.count; i ++) {
                         NSValue *pointObj = weakSelf.LCView.pointArray[i];
                         CGPoint pointRestored = [pointObj CGPointValue];
                         
                         // 如果 X 轴数值大于,X 轴会自动往后移动
                         if (x > weakSelf.LCView.xValues.count) {
                             // 移除没有展示出来的点,不然数组里存放的太多了,内容会爆棚
                             if (pointRestored.x < (x - weakSelf.LCView.xValues.count) ) {
                                 [weakSelf.LCView.pointArray removeObject:pointObj];
                             }
                         }
                     }
                     // 调用实时更新折线图的方法
                     [weakSelf.LCView exchangeLineAnyTime];