iOS绘制收益柱状图

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

时间： 2024-10-07 20:51:11

iOS绘制收益柱状图的相关文章

C# 绘制统计图(柱状图, 折线图, 扇形图)

统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用就C# 制作三款最经典的统计图: 柱状图, 折线图和扇形图:既然是统计, 当然需要数据, 这里演示的数据存于Sql Server2000中, 三款统计图形都是动态生成. 其中柱状图我会附上制作步骤, 其他两款统计图直接附源码. 说明: 需求不一样, 统计图形绘制后的显示效果也不一样, 比如这里柱状图

C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用就C# 制作三款最经典的统计图: 柱状图, 折线图和扇形图:既然是统计, 当然需要数据, 这里演示的数据存于Sql Server2000中, 三款统计图形都是动态生成. 其中柱状图我会附上制作步骤, 其他两款统计图直接附源码. 说明: 需求不一样, 统计图形绘制后的显示效果也不一样, 比如这里柱状图

iOS 绘制1像素的线

一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换. 这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可. 实际使用中我们需要牢记下面这一点: One point does not necessarily correspond to one physical pixel. 1

ios 绘制wav波形图

最近研究了如何在iOS上绘制wav波形图.查了很多资料,都没能找到一个很完整的介绍,我这里总结一下一些经验. 首先需要了解wav的这3个重要指标:采样率.采样位数.声道数.下面以16KHz, 16Bit, 单声道为例来说明. 采样率:(也称为采样速度或者采样频率)定义了每秒从连续信号中提取并组成离散信号的采样个数,单位用赫兹(Hz)来表示.采样频率的倒数是采样周期(也 称为采样时间),它表示采样之间的时间间隔.采样率为16KHz,表明每秒钟采样有16K次,即0.001秒内采集16个值. 采样位数

转：iOS绘制一个UIView

绘制一个UIView 绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方法就会被调用.覆盖此方法让你获得绘图操作的机会.当drawRect:方法被调用,当前图形上下文也被设置为属于视图的图形上下文.你可以使用Core Graphics或UIKit提供的方法将图形画到该上下文中. 你不应该手动调用drawRect:方法!如果你想调用drawRect:

D3绘制水平柱状图

一.前言 根据需要,Boss让你绘制水平的柱状图,左边显示昨天的数据,今天显示今天的数据.用D3画图 二.仿造数据 today.csv name,value,unit A,2000,% B,1000,t C,1400,￥ D,32,d E,520,d F,10000,d G,5500,元 H,740,t I,850,t J,950,t K,1100,t L,1200,t yesterday.csv name,value,unit A,1000,% B,800,t C,1200,￥ D,30,d

原创 ios绘制 圆形气泡

效果: 1 先自定义一个view #import <UIKit/UIKit.h> #define kCalloutWidth   80.0   //气泡高度 #define kCalloutHeight  95.0   //气泡宽度 #define kArrorHeight    15      //底部距离高度 @interface CallOutContentView : UIView @end 2实现代码 #import "CallOutContentView.h"

IOS 绘制PDF -转

-(void)createPdf:(UIImage *)img andText:(NSString *)text{ 2 NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); 3 NSString *saveDirectory = [paths objectAtIndex:0]; 4 NSString *saveFileName = @"myPDF.pdf&

iOS绘制手势解锁密码

手势解锁这个功能其实已经用的越来越少了.但是郁闷不知道我公司为什么每次做一个app都要把手势解锁加上.....于是就自己研究了一下手势解锁页面的实现.. 要想实现这个页面,先说说需要掌握哪些: UIPanGestureRecognizer的基本使用 CGRectContainsPoint(<#CGRect rect#>, <#CGPoint point#>) UIBezierPath贝塞尔曲线的绘制 drawRect 和 layoutIfNeeded 知道何时,如何使用 只要掌握上