项目需求，参考了其他绘图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