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;

            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.</span>

//


#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，设置了之后就不会出现了。