公司项目有需要用到胎心监测，设计的界面逻辑是需要一个可以表格，可以动态的在上面画上数据。有点类似散点图。找了很多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地址
