iOS绘制收益柱状图_移动开发_编程开发_程序员俱乐部

class="p1"> 项目需求，参考了其他绘图demo，自己绘制出来了，不过代码改得有点乱，添加了很多变量，时间关系没用太合适的命名，逻辑处理也没进行优化。

看看效果图（虚线区域都是画的，其他区域添加的都是控件），附上源码

 

 

#import <UIKit/UIKit.h>

 

typedef enum : NSUInteger {

    CSYieldTypeWeek = 0,    //周收益

    CSYieldTypeMonth = 1,   //月收益

    CSYieldTypeYear = 2,    //年收益

} CSYieldType;  //收益类型

 

typedef enum : NSUInteger {

    CSTimePointJanuary  = 0,         //一月份

    CSTimePointFebruary,

    CSTimePointMarch,

    CSTimePointApril,

    CSTimePointMay,             //.

    CSTimePointJun,             //.

    CSTimePointJuly,            //.

    CSTimePointAugust,

    CSTimePointSeptember,

    CSTimePointOctober,

    CSTimePointNovember,

    CSTimePointDecember,        //十二月份

    CSTimePointThisWeek,    //本周

    CSTimePointLastWeek,        //上周

    

} CSTimePoint;

 

@interface CSYieldChartView : UIView

@property (nonatomic,assign)CSYieldType yieldType; //收益类型

@property (nonatomic,assign)CSTimePoint timePoint;  //时间点

@property (nonatomic,strong) NSArray *yields; //收益数组

@property (nonatomic,strong) NSArray *dayPoints;   //时间点数组

 

//刷新图表

- (void)refreshChartWithYields:(NSArray *)yields dayPoints:(NSArray *)dayPoints yieldType:(CSYieldType)yieldType timePoint:(CSTimePoint)timePoint;

 

@end

 

 

#define yieldLineSpace 4

 

#define lineLeftMargin 40

#define lineRightMargin 10

#define lineTopMargin 10

#define lineBottomMargin 30

 

#define lineWidth 0.5f

 

#define itemLeftMargin 16

#define itemRightMargin 16

#define itemSpace 6

#define itemWidthRatio (5/12.f)

 

#define positiveItemHexColor 0xe83846   //正收益条颜色值

#define negativeItemHexColor 0x17c7ba   //负收益条颜色值

 

#import "CSYieldChartView.h"

#import "UIColor+Addition.h"

@implementation CSYieldChartView

 

-(void)refreshChartWithYields:(NSArray *)yields dayPoints:(NSArray *)dayPoints yieldType:(CSYieldType)yieldType timePoint:(CSTimePoint)timePoint

{

    self.yields = yields;

    self.dayPoints = dayPoints;

    self.yieldType = yieldType;

    self.timePoint = timePoint;

    

    [self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect

{

    

    //声明最大的收益

    float maxYield = 0;

    

    //获取最大的收益绝对值

    for (NSNumber *number in _yields) {

        if (maxYield < fabs([number floatValue])) {

            maxYield = fabs([number floatValue]);

        }

    }

    

    //若最大收益少于10，则将最大值设为10

    if (maxYield < 10.0) {

        maxYield = 10.0;

    }

    

    //分几段

    NSInteger sectionNum = 2;

    

    //平均每段的收益

    CGFloat sectionYield = maxYield / 2;

    

    UIColor *currentColor = [UIColor lightGrayColor];

    

    CGContextRef contextRef = UIGraphicsGetCurrentContext();

    CGContextBeginPath(contextRef);

    CGContextSetLineWidth(contextRef, lineWidth); //设置线粗

    

    CGContextSetStrokeColorWithColor(contextRef, currentColor.CGColor);   //设置画笔颜色

    

    //中线的y坐标

    CGFloat centerLineY = (self.frame.size.height - lineTopMargin - lineBottomMargin)/2.f + lineTopMargin;

    

    //设置段落风格

    NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];

    paragraph.alignment = NSTextAlignmentRight;

    //设置字体颜色

    UIColor *textColor = [UIColor lightGrayColor];

    //设置字体大小

    UIFont *textFont = [UIFont systemFontOfSize:10];

    

    //0收益中线

    CGContextMoveToPoint(contextRef, lineLeftMargin, centerLineY);

    CGContextAddLineToPoint(contextRef, self.frame.size.width - lineRightMargin, centerLineY);

    CGContextStrokePath(contextRef);

    

    //0收益率

    [@"0%" drawInRect:CGRectMake(0, centerLineY - 7, lineLeftMargin - yieldLineSpace, lineLeftMargin) withAttributes:@{NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:textColor,NSFontAttributeName:textFont}];

    

    //线与线的垂直距离

    CGFloat lineSpace = (self.frame.size.height - lineTopMargin - lineBottomMargin) / 4.f;

    

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

        CGFloat topLineY = centerLineY - lineSpace * (i + 1);

        CGFloat bottomLineY = centerLineY + lineSpace * (i + 1);

        

        //虚线 线宽与空格宽

        CGFloat dashes[] = {2,1};

        CGContextSetLineDash(contextRef, 0.0, dashes, 2);

        

        CGContextSetStrokeColorWithColor(contextRef, currentColor.CGColor);   //设置画笔颜色

 

        //中线以上

        CGContextMoveToPoint(contextRef, lineLeftMargin, topLineY);

        CGContextAddLineToPoint(contextRef, self.frame.size.width - lineRightMargin, topLineY);

        CGContextStrokePath(contextRef);

        

        //收益率

        [[NSString stringWithFormat:@"%.f%%",sectionYield * (i + 1)] drawInRect:CGRectMake(0, topLineY - 7, lineLeftMargin - yieldLineSpace, lineLeftMargin) withAttributes:@{NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:textColor,NSFontAttributeName:textFont}];

 

        CGContextSetStrokeColorWithColor(contextRef, currentColor.CGColor);   //设置画笔颜色

        

        //中线以下

        CGContextMoveToPoint(contextRef, lineLeftMargin, bottomLineY);

        CGContextAddLineToPoint(contextRef, self.frame.size.width - lineRightMargin, bottomLineY);

        CGContextStrokePath(contextRef);

        

        //负收益率

        [[NSString stringWithFormat:@"-%.f%%",sectionYield * (i + 1)] drawInRect:CGRectMake(0, bottomLineY - 7, lineLeftMargin - yieldLineSpace, lineLeftMargin) withAttributes:@{NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:textColor,NSFontAttributeName:textFont}];

    }

    

    if (0 == _yields.count) {

        paragraph.alignment = NSTextAlignmentCenter;

        

        NSDictionary *attributes = @{NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:textColor,NSFontAttributeName:[UIFont systemFontOfSize:40]};

        

        CGSize textSize = [@"暂无数据" sizeWithAttributes:attributes];

        

        [@"暂无数据" drawInRect:CGRectMake(lineLeftMargin + itemLeftMargin,centerLineY - textSize.height / 2.f,self.width - lineLeftMargin - itemLeftMargin - lineRightMargin - itemRightMargin,textSize.height) withAttributes:attributes];

        

        return;

    }

    

    

    NSString *lastDay = [_dayPoints lastObject];

    

    //最多有几个柱（如果是月收益，且收益数小于22，按22算，否则按收益数多少算）

    NSInteger partNum = (_yields.count < 22 && _yieldType == CSYieldTypeMonth) ? 22 : _yields.count;

    

    paragraph.alignment = NSTextAlignmentLeft;

    

    //绘制柱状图

    CGFloat averageSpace = (self.frame.size.width - lineLeftMargin - itemLeftMargin - lineRightMargin - itemRightMargin) / (partNum - 1);

    

    //柱宽

    CGFloat itemWidth = averageSpace * itemWidthRatio;

    

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

        

        if (i > _yields.count - 1)  //后面暂时还没收益就不画柱状条

        {

            break;

        }

        

        if (i % 5 == 0) {

            //绘制日期

            NSString *dayStr = nil;

            if (self.yieldType == CSYieldTypeMonth && 0 == i) {

                dayStr = [NSString stringWithFormat:@"%@(日)",_dayPoints[0]];

            }

            else

            {

                dayStr = [NSString stringWithFormat:@"%@",_dayPoints[i]];

            }

            [dayStr drawInRect:CGRectMake(lineLeftMargin + itemLeftMargin - 5 + averageSpace * i, self.frame.size.height - (lineBottomMargin - 6), 50, 15)withAttributes:@{NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:textColor,NSFontAttributeName:textFont}];

        }

        else if (i == _yields.count - 1)    //最后一个柱状图日期

        {

            [[NSString stringWithFormat:@"%@",lastDay]  drawInRect:CGRectMake(lineLeftMargin + itemLeftMargin - 5 + averageSpace * i, self.frame.size.height - (lineBottomMargin - 6), 50, 15)withAttributes:@{NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:textColor,NSFontAttributeName:textFont}];

        }

        

        //绘制柱状图

        float yield = [_yields[i] floatValue];

        

        

        float radius = itemWidth/2.f;   //柱状末尾的半圆半径

        

        //虚线 线宽与空格宽 （之前设了虚线，现在把虚线的间隙变为0）

        CGFloat dashes[] = {1,0};

        CGContextSetLineDash(contextRef, 0.0, dashes, 2);

        

        

        CGFloat itemX = lineLeftMargin + itemLeftMargin + averageSpace * i - itemWidth/2.f;

        CGFloat itemY = centerLineY - (lineSpace * sectionNum) * yield / maxYield;

        

        

        //是否要画半圆（如果收益高度低于宽度，就不画半圆）

        BOOL shouldDrawCircle = (fabs(itemY - centerLineY) > itemWidth/2.f) ? YES : NO;

        

        if (yield >= 0) {

            

            if (shouldDrawCircle) {

                itemY += radius;

            }

            

            //正收益颜色

            CGContextSetStrokeColorWithColor(contextRef, [UIColor colorWithHex:positiveItemHexColor].CGColor);

            CGContextSetFillColorWithColor(contextRef, [UIColor colorWithHex:positiveItemHexColor].CGColor);

        }

        else

        {

            

            if (shouldDrawCircle) {

                itemY -= radius;

            }

            

            //负收益颜色

            CGContextSetStrokeColorWithColor(contextRef, [UIColor colorWithHex:negativeItemHexColor].CGColor);

            CGContextSetFillColorWithColor(contextRef, [UIColor colorWithHex:negativeItemHexColor].CGColor);

        }

        

        

//        CGContextSetShadow(contextRef,CGSizeMake(2, 0) , 2);  //阴影效果

        

        CGMutablePathRef pathRef = CGPathCreateMutable();

        CGPathMoveToPoint(pathRef, NULL, itemX, centerLineY);

        CGPathAddLineToPoint(pathRef, NULL, itemX, itemY);

        CGPathAddLineToPoint(pathRef, NULL, itemX + itemWidth, itemY);

        CGPathAddLineToPoint(pathRef, NULL, itemX + itemWidth, centerLineY);

        CGPathCloseSubpath(pathRef);

        CGContextAddPath(contextRef, pathRef);

        CGContextFillPath(contextRef);

        CGContextAddPath(contextRef, pathRef);

        CGContextStrokePath(contextRef);

        

        

        if (shouldDrawCircle) {

            //画线末圆角

            CGPathMoveToPoint(pathRef, NULL, itemX + itemWidth/2.f, itemY);

            if (yield >= 0) {

                CGPathAddArc(pathRef, NULL, itemX + itemWidth/2.f, itemY, itemWidth/2.f, M_PI, 0, NO);

            }

            else

            {

                CGPathAddArc(pathRef, NULL, itemX + itemWidth/2.f, itemY, itemWidth/2.f, 0, M_PI, NO);

            }

            CGPathCloseSubpath(pathRef);

            CGContextAddPath(contextRef, pathRef);

            CGContextFillPath(contextRef);

            CGContextAddPath(contextRef, pathRef);

            CGContextStrokePath(contextRef);

        }

    }

}

 @end