iOS开发之横道图

.h文件

#import <UIKit/UIKit.h>

@class ProgressChartView;
@protocol ProgressChartViewDelegate<NSObject>

@required
- (NSString *)progressBeginTimeInChartView:(ProgressChartView *)progressChartView;
- (NSString *)progressEndTimeInChartView:(ProgressChartView *)progressChartView;
- (NSArray *)progressColorArrayInChartView:(ProgressChartView *)progressChartView;
- (NSArray *)progressValueArrayInChartView:(ProgressChartView *)progressChartView;
- (NSArray *)progressxAxisTitleArrayInChartView:(ProgressChartView *)progressChartView;

@end

@interface ProgressChartView :
UIView

@property (nonatomic,assign)id<ProgressChartViewDelegate>delegate;

- (void)reloadProgressChartView;

@end

.m文件

#import "ProgressChartView.h"

#import "UIView+Extension.h"

#import "GlobalTool.h"

#define kProgressYAxisWidth (33*WIDTH_PERCENT)

#define kProgressXAxisHeight (40*HEIGHT_PERCENT)

@interface
ProgressChartView()
{

UIView *_yAxisView;

UIView *_xAxisView;

UIView *_chartBgView;

UIScrollView *_bgScorllView;

double _xAxisLabelWidth;

NSArray *_colorsArray;

NSArray *_xAxisTitleArray;

NSArray *_xValuesArray;

NSString *_endTime;

NSString *_startTime;

long long _endTimeNum;

long long _startTimeNum;

NSMutableArray *_xAxisLabels;
}

@end
@implementation ProgressChartView
- (instancetype)initWithFrame:(CGRect)frame
{

self = [super
initWithFrame:frame];

if (self) {

_xAxisLabelWidth =
SCREEN_WIDTH/5.0;
[self
addYAxisView];

[self
addBgScrollView];
[self
addXAxisView];

_xAxisLabels = [[NSMutableArray
alloc]init];
}

return
self;
}

#pragma mark - setUI--------------
- (void)addYAxisView
{

_yAxisView = [[UIView
alloc]initWithFrame:CGRectMake(0,
0, kProgressYAxisWidth,self.height-kProgressXAxisHeight)];

[_yAxisView
setBackgroundColor:[UIColor
clearColor]];

NSArray *yAxisTitle =
@[@"计划\n日期",@"实际\n日期"];

for (int i =
0; i<yAxisTitle.count; i++) {

UILabel *l = [[UILabel
alloc]initWithFrame:CGRectZero];

[l setBackgroundColor:[UIColor
clearColor]];

[l setTextAlignment:NSTextAlignmentCenter];
[l
setTextColor:kPageColor];
[l
setFont:kPageSubFont];
[l
setText:yAxisTitle[i]];
l.numberOfLines =
0;

CGRect rect = [l.text
boundingRectWithSize:CGSizeMake(_yAxisView.width,
_yAxisView.height/3.0)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName:kPageFont}
context:nil];
[l
setBounds:CGRectMake(0,
0, _yAxisView.width, rect.size.height)];
[l
setCenter:CGPointMake(_yAxisView.width/2.0,_yAxisView.height/3.0*(i+1))];
[_yAxisView
addSubview:l];
}

[self
addSubview:_yAxisView];

}
- (void)addXAxisView
{

if (_xAxisView) {

[_xAxisView
removeFromSuperview];
}

_xAxisView = [[UIView
alloc]initWithFrame:CGRectMake(0,_bgScorllView.height-kProgressXAxisHeight,
_bgScorllView.width,
kProgressXAxisHeight)];

[_xAxisView
setBackgroundColor:[UIColor
clearColor]];

[_bgScorllView
addSubview:_xAxisView];
}
- (void)addBgScrollView
{

_bgScorllView = [[UIScrollView
alloc]initWithFrame:CGRectMake(_yAxisView.width,
0, self.width-_yAxisView.width,
self.height)];

_bgScorllView.showsHorizontalScrollIndicator =
NO;

[_bgScorllView
setBackgroundColor:[UIColor
clearColor]];

[self
addSubview:_bgScorllView];

}

#pragma -mark reloadChartView-------------------------------
- (void)reloadProgressChartView
{

[_bgScorllView
setContentOffset:CGPointMake(0,
0)];

_xValuesArray = [self.delegate
progressValueArrayInChartView:self];

_colorsArray = [self.delegate
progressColorArrayInChartView:self];

_xAxisTitleArray = [self.delegate
progressxAxisTitleArrayInChartView:self];

_startTime = [self.delegate
progressBeginTimeInChartView:self];

_endTime = [self.delegate
progressEndTimeInChartView:self];

float scrollContentWidth = (_xAxisTitleArray.count+1)*_xAxisLabelWidth;
[_bgScorllView
setContentSize:CGSizeMake(scrollContentWidth>_bgScorllView.width?scrollContentWidth:_bgScorllView.width,
_bgScorllView.height)];

[_chartBgView
setFrame:CGRectMake(0,
0, _bgScorllView.contentSize.width,
_bgScorllView.height-kProgressXAxisHeight)];

if (_chartBgView) {

[_chartBgView
removeFromSuperview];
}

_chartBgView = [[UIView
alloc]initWithFrame:CGRectMake(0,
0, _bgScorllView.width,
_bgScorllView.height-kProgressXAxisHeight)];

[_chartBgView
setBackgroundColor:[UIColor
clearColor]];

[_bgScorllView
addSubview:_chartBgView];

//划横线

for (int i =
0; i<2; i++) {

CAShapeLayer *shapeLayer = [CAShapeLayer
layer];

UIBezierPath *path = [UIBezierPath
bezierPath];
[path
moveToPoint:CGPointMake(_xAxisLabelWidth/2.0,i*(_chartBgView.height-0.5)+0.5)];
[path
addLineToPoint:CGPointMake(_bgScorllView.contentSize.width,i*(_chartBgView.height-0.5)+0.5)];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [[UIColorFromRGB(0xc1cfd9)
colorWithAlphaComponent:1]
CGColor];
shapeLayer.fillColor = [[UIColor
whiteColor] CGColor];
shapeLayer.lineWidth =
0.5;
[_chartBgView.layer
addSublayer:shapeLayer];
}

//划竖线

for (int i =
0; i<_xAxisTitleArray.count+1; i++) {

CAShapeLayer *shapeLayer = [CAShapeLayer
layer];

UIBezierPath *path = [UIBezierPath
bezierPath];

[path moveToPoint:CGPointMake(_xAxisLabelWidth/2.0+i*_xAxisLabelWidth,0)];

[path addLineToPoint:CGPointMake(_xAxisLabelWidth/2.0+i*_xAxisLabelWidth,(_chartBgView.height-0.5))];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [[UIColorFromRGB(0xc1cfd9)
colorWithAlphaComponent:1]
CGColor];
shapeLayer.fillColor = [[UIColor
whiteColor] CGColor];
shapeLayer.lineWidth =
0.5;
[_chartBgView.layer
addSublayer:shapeLayer];
}

//设置x轴

[self
addXAxisView];

NSInteger xAxisLabelCount = [_xAxisLabels
count];

NSInteger curXAxisValueCount = [_xAxisTitleArray
count];

if (xAxisLabelCount>curXAxisValueCount) {

for (NSInteger i = curXAxisValueCount; i<xAxisLabelCount; i++)
{

[_xAxisLabels
removeObjectAtIndex:i];
}
}

for (int i =
0; i < curXAxisValueCount; i++) {

CGRect rect =
CGRectMake(_xAxisLabelWidth*(1/2.0+2.0/16)+i*_xAxisLabelWidth,10,_xAxisLabelWidth*12.0/16,
kProgressXAxisHeight-20);

NSString *text = [_xAxisTitleArray
objectAtIndex:i];

if (i<xAxisLabelCount) {

CATextLayer *xAxisLayer = [_xAxisLabels
objectAtIndex:i];
[xAxisLayer
setFrame:rect];
[xAxisLayer
setString:text];
}else{

CATextLayer *xAxisLayer = [CATextLayer
new];
[xAxisLayer
setBackgroundColor:[UIColor
clearColor].CGColor];
[xAxisLayer
setFontSize:kPageFontNum];
[xAxisLayer
setString:text];
[xAxisLayer
setFrame:rect];
[xAxisLayer
setForegroundColor:kPageColor.CGColor];
[xAxisLayer
setAlignmentMode:@"center"];
xAxisLayer.contentsScale =
2.0f;

xAxisLayer.wrapped =
YES;
[_xAxisView.layer
addSublayer:xAxisLayer];
}
}

_endTimeNum = [self
exchangeTimeWithTimeString:_endTime];

_startTimeNum = [self
exchangeTimeWithTimeString:_startTime];

float chartXWidth =
_chartBgView.width-1.0/2*_xAxisLabelWidth
- _xAxisLabelWidth*9/16.0;

CAShapeLayer *dottedLine = [CAShapeLayer
layer];
[dottedLine
setFillColor:[UIColor
clearColor].CGColor];

[dottedLine setStrokeColor:[UIColor
lightGrayColor].CGColor
];
[dottedLine
setLineWidth:0.5f];
[dottedLine
setLineJoin:kCALineJoinRound];

[dottedLine setLineDashPattern:[NSArray
arrayWithObjects:[NSNumber
numberWithInt:3],[NSNumber
numberWithInt:1],
nil]];

CGMutablePathRef path =
CGPathCreateMutable();

//划进度

for (int i =
0; i<_xValuesArray.count; i++) {

NSArray *childArray = [_xValuesArray
objectAtIndex:i];

for (int j =
0; j<childArray.count; j++) {

NSString *nodeTime = [childArray
objectAtIndex:j];

if (nodeTime.length) {

long long curPointX = [self
exchangeTimeWithTimeString:nodeTime];

float grade = (float)(curPointX-_startTimeNum)/(_endTimeNum -
_startTimeNum);

CGPoint point = CGPointMake(grade*chartXWidth+_xAxisLabelWidth*8/16.0, (i+1)*_chartBgView.height*1/3.0
- 6 * WIDTH_PERCENT);

if (j!=childArray.count-1) {

NSString *nodeTime1 = [childArray
objectAtIndex:j+1];

if (nodeTime1.length) {

long long curPointX1 = [self
exchangeTimeWithTimeString:nodeTime1];

float grade1 = (float)(curPointX1-_startTimeNum)/(_endTimeNum-_startTimeNum);

CGPoint point1 = CGPointMake(grade1*chartXWidth+_xAxisLabelWidth*8/16.0, (i+1)*_chartBgView.height*1/3.0
- 6 * WIDTH_PERCENT);

if ((point1.x-6*WIDTH_PERCENT)-(point.x+8*WIDTH_PERCENT)>12*WIDTH_PERCENT/2.0)
{

CGPathMoveToPoint(path,
NULL,point.x+8*WIDTH_PERCENT,point.y+6*WIDTH_PERCENT);

CGPathAddLineToPoint(path,
NULL, point1.x-6*WIDTH_PERCENT,point1.y+6*WIDTH_PERCENT);
}
}

}

[self
addPointNodeWithPoint:point
timeString:nodeTime nodeColor:[_colorsArray
objectAtIndex:j] index:j];
}
}
}
[dottedLine
setPath:path];

CGPathRelease(path);
[_chartBgView.layer
addSublayer:dottedLine];

}
- (void)addPointNodeWithPoint:(CGPoint)point timeString:(NSString *)nodeTime
nodeColor:(UIColor *)nodeColor index:(NSInteger)index
{

CALayer *layer = [CALayer
new];

[layer setFrame:CGRectMake(point.x-5*WIDTH_PERCENT,
point.y,12*WIDTH_PERCENT,
12*WIDTH_PERCENT)];
[layer
setBackgroundColor:nodeColor.CGColor];
[layer
setCornerRadius:12*WIDTH_PERCENT/2.0 ];
[layer
setBorderColor:nodeColor.CGColor];
[_chartBgView.layer
addSublayer:layer];

CATextLayer *textLayer = [CATextLayer
new];

if (index%2==0) {
[textLayer
setFrame:CGRectMake(point.x-_xAxisLabelWidth*8.0/16,
point.y
+20*WIDTH_PERCENT,
_xAxisLabelWidth,
12*HEIGHT_PERCENT)];
}else{
[textLayer
setFrame:CGRectMake(point.x-_xAxisLabelWidth*8.0/16,
point.y
-20*WIDTH_PERCENT,
_xAxisLabelWidth,
12*HEIGHT_PERCENT)];
}
[textLayer
setString:nodeTime];
[textLayer
setAlignmentMode:@"center"];
textLayer.contentsScale =
2.0f;
textLayer.wrapped =
YES;
[textLayer
setFontSize:SCREEN_WIDTH>375?14:12];
[textLayer
setForegroundColor:kPageColor.CGColor];
[_chartBgView.layer
addSublayer:textLayer];
}
- (long
long)exchangeTimeWithTimeString:(NSString *)timeString
{
timeString = [timeString
substringToIndex:10];

NSDateFormatter *inputFormatter = [[NSDateFormatter
alloc] init];
[inputFormatter
setDateFormat:@"yyyy-MM-dd"];

NSDate* inputDate = [inputFormatter
dateFromString:timeString];

long long time = [inputDate
timeIntervalSince1970];

return time;
}

效果图：