iOS轮询请求并在图表中动态显示

最近接到一个需求，需要iOS设备实时获取服务器的数据，并动态显示在图表中。

主要工作有以下几点：1、写一个轮询，每隔一段时间就从服务器获取数据；2、根据获取到的数据显示在图表中。

1、轮询操作：

轮询的方法很多，比如通过NSthread起个线程，并在子线程中循环请求服务数据，通过GCD的定时器也可以实现，本文采用的是通过RunLoop的形式，RunLoop的优势大家可以百度下。不过这些都不是最优方法，最好的是通过websocket。

话不多说，直接上代码吧。

runLoop模块：

新建图表显示的控制器类：DeviceChartViewController

-(void)myRunloop  
{  
    [NSThread detachNewThreadSelector:@selector(newThreadFun) toTarget:self withObject:nil];  
}  

-(void)newThreadFun  
{  
    @autoreleasepool {  
        end =NO;  
        NSRunLoop * myRunLoop =[NSRunLoop currentRunLoop];  
        CFRunLoopObserverContext context = {0,CFBridgingRetain(self),NULL,NULL,NULL};  
        CFRunLoopObserverRef observer = CFRunLoopObserverCreate(kCFAllocatorDefault, kCFRunLoopAllActivities, YES, 0, &myRunLoopObserver, &context);  
        if (observer) {  
            CFRunLoopRef cfRunloop = [myRunLoop getCFRunLoop];  
            CFRunLoopAddObserver(cfRunloop, observer, kCFRunLoopDefaultMode);  
        }  
        [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(timerprocess) userInfo:nil repeats:YES];  
        while (!end) {  
            [myRunLoop runUntilDate:[NSDate dateWithTimeIntervalSinceNow:3.0]];  
        }  

    }  
}  

-(void)timerprocess{  
    ESPCNetworkDeviceDetailRequest *request = [[MyRequest alloc] init];  
    [self request:request];  
}  
void myRunLoopObserver(CFRunLoopObserverRef observer,CFRunLoopActivity activity,void* info)  
{  
    switch (activity) {  
        case kCFRunLoopEntry:  
            NSLog(@"run loop entry");  
            break;  
        case kCFRunLoopBeforeTimers:  
            NSLog(@"run loop before times");  
            break;  
        case kCFRunLoopBeforeSources:  
            NSLog(@"run loop before sources");  
            break;  
        case kCFRunLoopBeforeWaiting:  
            NSLog(@"run loop before waiting");  
            break;  
        case kCFRunLoopAfterWaiting:  
            NSLog(@"run loop after waiting");  
            break;  
        case kCFRunLoopExit:  
            NSLog(@"run loop exit");  
            break;  
        default:  
            break;  
    }  
}  

请求后的结果处理：

- (void)NetworkDidFinishLoad:(NetworkProvider *)provider  
{  
    if (provider == myProvider) {  

        _dRep = myProvider.torResponse;  

        if ([_dRep.code isEqualToString:@"1"]) {  
            NSDictionary *dict = _dRep.detailInfoDict;  
            NSNumber * statusvalue;  
[objc] view plain copy
            statusvalue = [dict objectForKey:@"statusValue"];  
            [self.lineChart addPoint:statusvalue.floatValue]; //图表处理函数  
        }  
    }  
}  

- (void)espcNetwork:(TORBaseNetworkProvider *)provider didFailLoadWithError:(NSError *)error  
{  
    if (provider == _deviceDetailProvider) {  
        [self hideHUD];  
        _dRep = (ESPCNetworkDeviceDetailResponse*)_deviceDetailProvider.torResponse;  

        NSString*msg = @"没有获取到数据，请稍后重试！";  

        if (_dRep&&_dRep.msg) {  
            msg = _dRep.msg;  
        }  

    }  
}  

2、图表处理
新建一个UIView的类DSGraphChart

//  
//  DSGraphChart.h  
//  
//  Created by icarus on 15/11/27.  
//  Copyright © 2015年 icarus. All rights reserved.  
//  

#import <UIKit/UIKit.h>  

@interface DSGraphChart : UIView{  
    UIColor *strokeColor;  
    UIColor *zeroLinestrokeColor;  
    UIColor * unitLinestrokeColor;  

    int strokeLineWidth;  
    int zeroLineWidth;  
    int unitLineWidth;  

    NSMutableArray * pointsArray;  

    double ymax;  
    double ymin;  
    double defaultValue;  
    int ValueNum;  
    int unitNum;  
    NSInteger chartHeight;  
    NSInteger chartWidth;  
    int topOffset;  
}  


-(void)addPoint:(float)pointvalue;  

-(void)setPoints:(float)value;  
-(void)setDefaultVaule:(float)value;  

@end  

//  
//  DSGraphChart.m  

//  Created by icarus on 15/11/27.  
//  Copyright © 2015年 icarus. All rights reserved.  
//  

#import "DSGraphChart.h"  

@implementation DSGraphChart  



-(id)initWithFrame:(CGRect)frame  
{  
    if (self=[super initWithFrame:frame]) {  
        ymax =100.0;  
        ymin =0.0;  

        [self setBackgroundColor:[UIColor whiteColor]];  
        strokeLineWidth = 2 ;  
        zeroLineWidth = unitLineWidth =1;  
        strokeColor = [UIColor greenColor];  
        zeroLinestrokeColor = [UIColor blackColor];  
        unitLinestrokeColor = [UIColor grayColor];  

        defaultValue =50;  
        ValueNum =10;  
        unitNum = 5;  
        pointsArray =[[NSMutableArray alloc] init];  
        for (int i=0; i<ValueNum; i++) {  
            [pointsArray addObject:[NSNumber numberWithFloat:defaultValue]];  
        }  

        topOffset =8;  
        chartHeight = self.frame.size.height-topOffset;  

        for (int i=0; i<=unitNum; i++) {  
            NSInteger labelHeght =10;  
            UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0, self.frame.size.height-chartHeight/unitNum*i-topOffset/2-labelHeght/2, self.frame.size.width/ValueNum, labelHeght)];  
            [label setText:[NSString stringWithFormat:@"%1.1f",(ymax-ymin)/unitNum*i]];  
            [label setTextAlignment:NSTextAlignmentCenter];  
            [label setFont:[UIFont systemFontOfSize:10.0f]];  
            [self addSubview:label];  
        }  

    }  
    return self;  
}  


-(void)setDefaultVaule:(float)value  
{  
    defaultValue =value;  
    [self setNeedsDisplay];  
}  

-(void)setPoints:(float)value  
{  
    [pointsArray removeAllObjects];  
    for (int i=0; i<ValueNum; i++) {  
        [pointsArray addObject:[NSNumber numberWithFloat:value]];  
    }  
    [self setNeedsDisplay];  
}  


-(void)addPoint:(float)pointvalue  
{  
    [pointsArray insertObject:@(pointvalue) atIndex:0];  
    [pointsArray removeObjectAtIndex:[pointsArray count] - 1];  

    [self setNeedsDisplay];  
}  


- (NSArray*)arrayOfPoints {  

    NSMutableArray *points = [NSMutableArray array];  

    int viewWidth = CGRectGetWidth(self.frame);  
    int viewHeight = CGRectGetHeight(self.frame);  

    for (int i = 0; i < [pointsArray count]; i++) {  


        float point1x = viewWidth - (viewWidth / ValueNum) * i;   
        float point1y = (viewHeight - (chartHeight / (ymax-ymin)) * [pointsArray[i] floatValue])-topOffset/2;   
        CGPoint p;  
        p = CGPointMake(point1x, point1y);  

        [points addObject:[NSValue valueWithCGPoint:p]];  
    }  

    return points;  

}  


// Only override drawRect: if you perform custom drawing.  
// An empty implementation adversely affects performance during animation.  
- (void)drawRect:(CGRect)rect {  
    // Drawing code  

    NSMutableArray *points = [[self arrayOfPoints] mutableCopy];  

    // Add control points to make the math make sense  
    [points insertObject:points[0] atIndex:0];  
    [points addObject:[points lastObject]];  

    UIBezierPath *lineGraph = [UIBezierPath bezierPath];  

    [lineGraph moveToPoint:[points[0] CGPointValue]];  

    for (NSUInteger index = 1; index < points.count - 2; index++)  
    {  

        CGPoint p0 = [(NSValue *)points[index - 1] CGPointValue];  
        CGPoint p1 = [(NSValue *)points[index] CGPointValue];  
        CGPoint p2 = [(NSValue *)points[index + 1] CGPointValue];  
        CGPoint p3 = [(NSValue *)points[index + 2] CGPointValue];  

        float granularity=20.0;  
        // now add n points starting at p1 + dx/dy up until p2 using Catmull-Rom splines  
        for (int i = 1; i < granularity; i++)  
        {  
            float t = (float) i * (1.0f / (float) granularity);  
            float tt = t * t;  
            float ttt = tt * t;  

            CGPoint pi; // intermediate point  
            pi.x = 0.5 * (2*p1.x+(p2.x-p0.x)*t + (2*p0.x-5*p1.x+4*p2.x-p3.x)*tt + (3*p1.x-p0.x-3*p2.x+p3.x)*ttt);  
            pi.y = 0.5 * (2*p1.y+(p2.y-p0.y)*t + (2*p0.y-5*p1.y+4*p2.y-p3.y)*tt + (3*p1.y-p0.y-3*p2.y+p3.y)*ttt);  
            [lineGraph addLineToPoint:pi];  
        }  

        [lineGraph addLineToPoint:p2];  
    }  

    [lineGraph addLineToPoint:[(NSValue *)points[(points.count - 1)] CGPointValue]];  

    [strokeColor setStroke];  

    lineGraph.lineCapStyle = kCGLineCapRound;  
    lineGraph.lineJoinStyle = kCGLineJoinRound;  
    lineGraph.flatness = 0.5;  
    lineGraph.lineWidth = strokeLineWidth; // line width  
    [lineGraph stroke];  

    [zeroLinestrokeColor setStroke];  

    UIBezierPath *zeroLine = [UIBezierPath bezierPath];  
    [zeroLine moveToPoint:CGPointMake(self.frame.size.width/ValueNum, self.frame.size.height/2)];  
    [zeroLine addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height/2)];  
    zeroLine.lineWidth = zeroLineWidth; // line width  
    [zeroLine stroke];  

    [unitLinestrokeColor setStroke];  
    for (int i=0; i<=unitNum; i++) {  
        UIBezierPath *unitLine = [UIBezierPath bezierPath];  
        [unitLine moveToPoint:CGPointMake(self.frame.size.width/ValueNum, self.frame.size.height-chartHeight/unitNum*i-topOffset/2)];  
        [unitLine addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height-chartHeight/unitNum*i-topOffset/2)];  
        unitLine.lineWidth = unitLineWidth;  
        [unitLine stroke];  
    }  

}  

@end  

在DeviceChartViewController初始化图表类并动态显示：

//  
//  DeviceChartViewController.h  
//  ESPC-M-HD  
//  
//  Created by icarus on 15/11/26.  
//  Copyright © 2015年 icarus<span style="font-family: Arial, Helvetica, sans-serif;">. All rights reserved.
//  


#import <UIKit/UIKit.h>  

@interface DeviceChartViewController : UIViewController  
{  
    BOOL end;  
}  

@property (nonatomic,strong) NSString* charttitle;  
@property (nonatomic,strong) NSString* statusName;  
@property (nonatomic,strong) NSString* device_hash;  
@property (nonatomic,strong) NSNumber* defaultValue;  
@end  

- (void)viewDidLoad {  
    [super viewDidLoad];  
    // Do any additional setup after loading the view.  

    valueArray = [[NSMutableArray alloc] init];  

    [self.view addSubview:self.lineChart];  

}  

-(void)viewDidAppear:(BOOL)animated  
{  
    [super viewDidAppear:YES];  
    [self myRunloop];  
}  

-(void)viewWillDisappear:(BOOL)animated  
{  
    [super viewWillDisappear:YES];  
    end =YES;  
}  
-(DSGraphChart *)lineChart{  
    if (!_lineChart) {  
        _lineChart = [[DSGraphChart alloc] initWithFrame:CGRectMake(0, 80, self.view.bounds.size.width, 400)];  
        [_lineChart setPoints:self.defaultValue.floatValue];  
    }  
    return _lineChart;  
}  

最终展示的效果：

主要说下一个坑：那就是UIView的drawrext重绘机制，刚开始做的时候，随着数据的动态变化，uiview重绘后没有清除之前的图形，导致出现了多条曲线，看遍代码找不到问题出在哪里，后来无意中发现，是没有设置uiview的backgroundColor，设置了之后就不会出现了。

---

原文链接：http://blog.youkuaiyun.com/cengon/article/details/50070647