iOS开发：一个可以实时加点的Chart

公司项目有需要用到胎心监测，设计的界面逻辑是需要一个可以表格，可以动态的在上面画上数据。有点类似散点图。找了很多demo发现基本都是一次性加完的，实时的相对比较少，于是就自己写了一个小demo。

胎心监测，动态添加点

demo比较简单，整体的逻辑是，首先建立一个view，后面那个蓝色的当做大的背景。然后传入横坐标和竖坐标数组。

    self.chartview = [[MChartMainView alloc]init];
    self.chartview.frame = CGRectMake(0, 40, [UIScreen mainScreen].bounds.size.width, 200);
    self.chartview.backgroundColor = [UIColor blueColor];
    self.chartview.horizontalArray = @[@" 0",@"",@"10",@"",@"20",@"",@"30",@"",@"40",@"",@"50",@"",@"60",@"",@"70",@"",@"80"];
    self.chartview.verticalArray = @[@"80",@"90",@"100",@"110",@"120",@"130",@"140",@"150",@"160",@"170",@"180",@"190",@"200"];
    [self.view addSubview:self.chartview];

在MChartMainView中，计算出每个小单元格的宽度和高度，因为要放横坐标和竖坐标的数值我这里预留了两个格子的空间。

- (void)drawRect:(CGRect)rect {
    self.chartView = [[MChartView alloc]init];
    self.chartView.horizontalArray = self.horizontalArray;
    self.chartView.verticalArray = self.verticalArray;
    
    //预留两格空位
    self.chartView.averageWidth = self.frame.size.width/(self.horizontalArray.count+1);
    self.chartView.averageHeight = self.frame.size.height/(self.verticalArray.count+1);
    self.chartView.frame = CGRectMake(self.chartView.averageWidth*1.5, self.chartView.averageHeight*0.5, self.frame.size.width-self.chartView.averageWidth*2, self.frame.size.height-self.chartView.averageHeight*2);
    self.chartView.layer.borderColor = [UIColor redColor].CGColor;
    self.chartView.layer.borderWidth = 1.0f;
    self.chartView.backgroundColor = [UIColor yellowColor];
    [self addSubview:self.chartView];
    [self addHorizontalLabel];
    [self addVerticalLabel];
}


- (void)addHorizontalLabel {
    for (int i = 0; i<self.horizontalArray.count; i++) {
        [self addSubview:[self label:CGRectMake(self.chartView.averageWidth+self.chartView.averageWidth*i, self.chartView.frame.size.height+self.chartView.frame.origin.y,self.chartView.averageWidth , self.chartView.averageHeight) title:self.horizontalArray[i]]];
    }
}

- (void)addVerticalLabel {
    for (int i = 0; i<self.verticalArray.count; i++) {
        [self addSubview:[self label:CGRectMake(self.chartView.averageWidth*0.2, self.frame.size.height-self.chartView.averageHeight*2-self.chartView.averageHeight*i,self.chartView.averageWidth , self.chartView.averageHeight) title:self.verticalArray[i]]];
    }
}

在确定好内部表格的大小之后，在MChartView中开始绘制线条。

 //画横向线条
    if (self.horizontalArray) {
        for (int i = 0; i<self.horizontalArray.count; i++) {
            double x = _averageWidth*i;
          [self drawLine:CGPointMake(x, self.frame.size.height) endPoint:CGPointMake(x, 0)];
        }
    }
    
    //画竖向线条
    if (self.verticalArray) {
        for (int i = 0; i<self.verticalArray.count; i++) {
            double y = _averageHeight*i;
            [self drawLine:CGPointMake(0, y) endPoint:CGPointMake(self.frame.size.width, y)];
        }
    }  

到这里表格和横竖坐标就画好了。下面是实现动态的添加数值。为了模拟胎心监测仪返回的数值，我这里写了一个定时器，0.25秒返回一次随机数值。

- (void)countDownTimer {
    dispatch_source_t timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0));
    dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, 0.25 * NSEC_PER_SEC, 0 * NSEC_PER_SEC);
    dispatch_source_set_event_handler(timer, ^{
        self.timer += 0.25;
        [self pointTimer];
        if (self.timer>=10) {
            dispatch_source_cancel(timer);
        }
    });
    dispatch_resume(timer);
}

- (void)pointTimer { dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        __block int point = 80;
        point += arc4random() % 100;
        if (point>200) {
            point = 80;
        }
        //因为最终要分析数据，所以这里用了个字典保存。
        [self.pointDic setObject:[NSNumber numberWithInt:point] forKey:[NSString stringWithFormat:@"%.2f",self.timer]];
        //调用添加点的方法
        [self.chartview addPoint:self.timer heartbeat:point];
    });
}

然后在定时器中对数据进行保存的同时，调用添加点的方法，横向数值与纵向数值。

 [self.chartview addPoint:self.timer heartbeat:point];

经过传递后，在MChartView中对点所在位置进行计算。之后调用setNeedsDisplay进行绘制。

/计算点的坐标
- (void)setPoint:(double)time  heartbeat:(NSInteger)number {
    double length = (double)[[self.horizontalArray lastObject] integerValue] - [[self.horizontalArray firstObject] integerValue];
    CGFloat xPoint = time/length*self.frame.size.width;
    [self.xArray addObject:[NSNumber numberWithFloat:xPoint]];
    
    double height = (double)[[self.verticalArray lastObject]integerValue] - [[self.verticalArray firstObject]integerValue];
    double tempNumber = number - [[self.verticalArray firstObject] integerValue];
    CGFloat yPoint = (1-tempNumber/height)*self.frame.size.height;
    [self.yArray addObject:[NSNumber numberWithFloat:yPoint]];

    dispatch_async(dispatch_get_main_queue(), ^{
        [self setNeedsDisplay];
    });
}

到这里就完成了整个demo。
DEMO地址