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;

}

效果图：