今天我們要完成下圖的功能：
圖1.png
開(kāi)始吧
首先我們?cè)O(shè)置漸變的背景顏色：
在-(void)drawRect:(CGRect)rect里面添加下面方法
/**
* 設(shè)置漸變背景圖層
*/
- (void)setGradualBackGroundColor{
// 創(chuàng)建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 創(chuàng)建色彩空間對(duì)象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
// 創(chuàng)建起點(diǎn)顏色
CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.98, 0.505f, 0.258, 1.0f});
// 創(chuàng)建終點(diǎn)顏色
CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.99f, 0.03f, 0.07f, 1.0f});
// 創(chuàng)建顏色數(shù)組
CFArrayRef colorArray = CFArrayCreate(kCFAllocatorDefault, (const void*[]){beginColor, endColor}, 2, nil);
// 創(chuàng)建漸變對(duì)象
CGGradientRef gradientRef = CGGradientCreateWithColors(colorSpaceRef, colorArray, (CGFloat[]){
0.0f, // 對(duì)應(yīng)起點(diǎn)顏色位置
1.0f // 對(duì)應(yīng)終點(diǎn)顏色位置
});
// 釋放顏色數(shù)組
CFRelease(colorArray);
// 釋放起點(diǎn)和終點(diǎn)顏色
CGColorRelease(beginColor);
CGColorRelease(endColor);
// 釋放色彩空間
CGColorSpaceRelease(colorSpaceRef);
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(0, CGRectGetHeight(self.frame)), 0);
// 釋放漸變對(duì)象
CGGradientRelease(gradientRef);
}
背景效果圖：
圖2.png
從圖1可以看出：
折線(xiàn)見(jiàn)的間距 ＝ （視圖寬度 －2*leftRigthMargin － distanceInsertLeft - distanceInsertRigth）/(總點(diǎn)數(shù) － 1)
那我們就可以確定每個(gè)點(diǎn)的X坐標(biāo)了滓侍。根據(jù)_topMargin 和_bottomMargin 來(lái)計(jì)算出y坐標(biāo)：
//返回?cái)?shù)組中最大的一個(gè)數(shù)
- (NSInteger)theChartTopY :(NSArray *)arr{
CGFloat max = 0;
for (int index = 0 ; index < arr.count; index ++) {
NSArray *data = arr[index];
max = MAX(max, [[data lastObject] floatValue]);
}
return (NSInteger)max;
}
//返回一個(gè)儲(chǔ)存寬高的二維數(shù)組坐標(biāo)軸[[x,y],[x,y]]
- (NSArray *)arrayWithPointX{
/*
數(shù)據(jù)_dataPoints格式為 @[@[@"5月21",@"8659"],@[@"22",@"4587"],@[@"23",@"18956"],@[@"24",@"12541"],@[@"26",@"8658"],@[@"27",@"22564"],@[@"28",@"12546"]];
每個(gè)點(diǎn)的間距 ：
_distanceOfEachPoint = (CGRectGetWidth(self.frame) - 2*_leftRigthMargin- _distanceInsertLeft - _distanceInsertRigth)/(_dataPoints.count -1);
*/
CGFloat maxNum =(CGFloat)[self theChartTopY:_dataPoints];
NSMutableArray *mutableArr = [NSMutableArray arrayWithCapacity:_dataPoints.count];
for (int index = 0; index <_dataPoints.count; index ++) {
NSArray *data = _dataPoints[index];
NSMutableArray *eachArr = [NSMutableArray arrayWithCapacity:_dataPoints.count];
[eachArr addObject:@(_leftRigthMargin +_distanceInsertLeft + _distanceOfEachPoint*index)];
[eachArr addObject:@(_topMargin + ((maxNum - [[data lastObject] floatValue])/maxNum)*(CGRectGetHeight(self.frame) - _topMargin - _bottomMargin))];
[mutableArr addObject:eachArr];
}
return [mutableArr copy];
}
接下來(lái)就是畫(huà)點(diǎn)畫(huà)線(xiàn)了：
/**
* 畫(huà)圓點(diǎn)
*/
- (void)drawCircle{
CGFloat side = 5.0;
NSArray *arr = [self arrayWithPointX];
UIColor *color = [UIColor whiteColor];
[color set];
for (int index = 0 ; index < arr.count; index ++) {
NSArray *eachArr = arr[index];
UIBezierPath *circlepath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake([eachArr[0] floatValue]- side/2, [eachArr[1] floatValue]- side/2, side, side)];
[circlepath fill];
}
}
/**
* 畫(huà)水平線(xiàn)
*/
- (void)drawHorizontingLine{
UIColor *color = [UIColor whiteColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = .5;
[path moveToPoint:CGPointMake(_leftRigthMargin, CGRectGetHeight(self.frame ) - _bottomMargin)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - _leftRigthMargin, CGRectGetHeight(self.frame ) - _bottomMargin)];
[path moveToPoint:CGPointMake(_leftRigthMargin, _topMargin)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - _leftRigthMargin, _topMargin )];
[path stroke];
//畫(huà)中間的虛線(xiàn)
UIBezierPath *dashedPath = [UIBezierPath bezierPath];
dashedPath.lineWidth = .5;
[dashedPath moveToPoint:CGPointMake(_leftRigthMargin, (CGRectGetHeight(self.frame ) - _bottomMargin +_topMargin)/2)];
CGFloat dash[] = {1,1};
[dashedPath setLineDash:dash count:1 phase:0];
[dashedPath addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - _leftRigthMargin, (CGRectGetHeight(self.frame ) - _bottomMargin +_topMargin)/2 )];
[dashedPath stroke];
}
/**
* 添加折線(xiàn)
*/
- (void)drawLine{
NSArray *arr = [self arrayWithPointX];
UIColor *color = [UIColor whiteColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 1.0;
path.lineCapStyle = kCGLineCapRound;//線(xiàn)條拐角
path.lineJoinStyle = kCGLineCapRound;//終點(diǎn)處理
for (int index = 0 ; index < arr.count; index ++) {
NSArray *XYArr = arr[index];
if (!index) {
[path moveToPoint:CGPointMake([XYArr[0] floatValue], [XYArr[1] floatValue])];
}else{
// Draw the lines
[path addLineToPoint:CGPointMake([XYArr[0] floatValue], [XYArr[1] floatValue])];
}
}
[path stroke];
UIBezierPath *copyPath = [path copy];
[copyPath addLineToPoint:CGPointMake((CGRectGetWidth(self.frame) - _leftRigthMargin - _distanceInsertRigth ), CGRectGetHeight(self.frame)-_bottomMargin)];
[copyPath addLineToPoint:CGPointMake(_leftRigthMargin + _distanceInsertLeft, CGRectGetHeight(self.frame)-_bottomMargin)];
[copyPath closePath];
//該方法調(diào)用后饵隙，接下來(lái)拿到的UIGraphicsGetCurrentContext()對(duì)象就是根據(jù)這個(gè)貝塞爾曲線(xiàn)路徑創(chuàng)建的Quartz上下文
[copyPath addClip];
// 創(chuàng)建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 創(chuàng)建色彩空間對(duì)象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
// 創(chuàng)建起點(diǎn)顏色
CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){1, 1, 1,0.5});
// 創(chuàng)建終點(diǎn)顏色
CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){1, 1, 1, 0});
// 創(chuàng)建顏色數(shù)組
CFArrayRef colorArray = CFArrayCreate(kCFAllocatorDefault, (const void*[]){beginColor, endColor}, 2, nil);
// 創(chuàng)建漸變對(duì)象
CGGradientRef gradientRef = CGGradientCreateWithColors(colorSpaceRef, colorArray, (CGFloat[]){
0.0f, // 對(duì)應(yīng)起點(diǎn)顏色位置
1.0f // 對(duì)應(yīng)終點(diǎn)顏色位置
});
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(_leftRigthMargin , _topMargin), CGPointMake(_leftRigthMargin, CGRectGetHeight(self.frame) - _bottomMargin), 0);
}
添加底部的日期：
/**
* 添加底部的日期lable 和最大值的和最小值文本
*/
- (void)addDateInfo{
NSArray *arr = [self arrayWithPointX];
for (int index = 0; index < arr.count; index ++) {
NSArray *eachArr = arr[index];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0,_distanceOfEachPoint , _bottomMargin)];
label.text = _dataPoints[index][0];
label.textAlignment = 1;
label.textColor = [UIColor whiteColor];
label.font = [UIFont systemFontOfSize:13];
label.center = CGPointMake([eachArr[0] floatValue], CGRectGetHeight(self.frame) - _bottomMargin/2);
[self addSubview:label];
}
//最大值
UILabel *topLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame) - _distanceInsertRigth -_leftRigthMargin, _topMargin, _distanceInsertRigth, 15)];
topLabel.text = [NSString stringWithFormat:@"%ld",[self theChartTopY:_dataPoints]];
topLabel.font = [UIFont systemFontOfSize:11];
topLabel.textColor = [UIColor whiteColor];
topLabel.textAlignment = 1;
[self addSubview:topLabel];
//最小值
UILabel *bottomLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame) - _distanceInsertRigth -_leftRigthMargin, CGRectGetHeight(self.frame)-_bottomMargin - 15, _distanceInsertRigth, 15)];
bottomLabel.text = @"0";
bottomLabel.font = [UIFont systemFontOfSize:11];
bottomLabel.textColor = [UIColor whiteColor];
bottomLabel.textAlignment = 1;
[self addSubview:bottomLabel];
}
最終效果.png
ps:該demo只是提供一種做漸變的思路玫膀，并沒(méi)有完成整個(gè)圖表。
demo地址
