由于一个项目的需求，需要写一个柱状图，在网上看了不少demo，最后用了一个比较简单易懂的demo模板，对于初学者很有帮助，现在我把这个demo贴出来，供大家学习。如有侵权，请联系博主，立即删掉。
封装一个BarChartView
- BarChartView.h
@property(nonatomic,strong) NSArray *dataResource;
- (UIColor *)colorWithIndex:(int)index;- BarChartView.m
1、 宏定义柱状图的刻度线宽度、条数、间距、左右距、条状图宽
#define BarChartBoxH self.frame.size.height / 7
#define BarChartBoxW (self.frame.size.width - BarChartRightSpacing - BarChartLeftSpacing) / 5//间距
#define BarChartLeftSpacing 40*ADAPTER_WIDTH//条形图左距
#define BarChartRightSpacing 25*ADAPTER_WIDTH//条形图右距
#define barChartColumnW 12*ADAPTER_WIDTH//条形图列宽注意，算间距和宽度需按照自己的数据源而定
2、延展
@interface BarChartView()
@property(nonatomic,strong) NSMutableArray *yArr;//y轴刻度
@property(nonatomic,copy) NSString *yUnit;
@property(nonatomic, assign) int level;
@property(nonatomic, copy) NSString *type;
@end3、Getter、Setter方法、初始化方法
-(instancetype)initWithFrame:(CGRect)frame{
if(self = [super initWithFrame:frame]){
self.backgroundColor = [UIColor whiteColor];
}
return self;
}
-(NSMutableArray *)yArr{
if(!_yArr){
_yArr = [NSMutableArray array];
}
return _yArr;
}
-(void)setDataResource:(NSArray *)dataResource{
_dataResource = dataResource;
self.yUnit = @"(元)";
[self getYDataArrWithDataResource:_dataResource];//获取y轴上的值
}4、根据数据源得到y轴刻度，由数据源中最大的值决定y轴的数值单位
-(void)getYDataArrWithDataResource:(NSArray *)dataResource{
CGFloat maxValue = [self maxValueWithDataResource:dataResource];//获取最大值
[self getUnitWithMaxValue:maxValue];//获取刻度值
}
-(CGFloat)maxValueWithDataResource:(NSArray *)dataResource{
//获取最大值
NSDictionary *dic = self.dataResource[0];
CGFloat maxValue = [dic[@"money"] floatValue];
for(int i = 1 ; i < dataResource.count ; i++){
NSDictionary *dic = self.dataResource[i];
CGFloat compareValue = [dic[@"money"] floatValue];
if(maxValue < compareValue){
maxValue = compareValue;
}
}
return maxValue;
}
-(void)getUnitWithMaxValue:(int )maxValue{
int unitNum = 0;
int tempValue = 1;
for(int i = 0 ; true ; i++){
tempValue *= 10;
if((maxValue / tempValue) == 0){
unitNum = i + 1;
break;
}
}
if((maxValue / (int)pow(10, unitNum - 1)) < 5){
self.type = @"f";
switch (unitNum) {
case 1://个 上限十
case 2://十
//以元位单位 上限五十
self.level = 1;
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
self.yUnit = @"(元)";
break;
case 3: //百 上限五百
self.level = 10;
self.yUnit = @"(十)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
case 4://以百为单位 10,00 上限五千
self.level = 100;
self.yUnit = @"(百)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
case 5://以千为单位 10,000 上限五万
self.level = 1000;
self.yUnit = @"(千)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
case 6://以万为单位 10,0000 上限五十万
self.level = 10000;
self.yUnit = @"(万)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
case 7://以十万为单位 10,00000 上限制五百万
self.level = 100000;
self.yUnit = @"(十万)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
case 8://以百万为单位 10,000000 上限制五千万
self.level = 1000000;
self.yUnit = @"(百万)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
case 9://以百万为单位 10,000000 上限制五亿
self.level = 1000000;
self.yUnit = @"(千万)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
default:
break;
}
}else{
self.type = @"l";
switch (unitNum) {
case 1://个 上限十
case 2://十
//以元位单位 上限百
self.level = 1;
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
self.yUnit = @"(元)";
break;
case 3: //百 上限千
self.level = 10;
self.yUnit = @"(十)";
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
break;
case 4://以百为单位 10,00 上限万
self.level = 100;
self.yUnit = @"(百)";
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
break;
case 5://以千为单位 10,000 上限十万
self.level = 1000;
self.yUnit = @"(千)";
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
break;
case 6://以万为单位 10,0000 上限百万
self.level = 10000;
self.yUnit = @"(万)";
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
break;
case 7://以十万为单位 10,00000 上限制千万
self.level = 100000;
self.yUnit = @"(十万)";
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
break;
case 8://以百万为单位 10,000000 上限制亿
self.level = 1000000;
self.yUnit = @"(百万)";
[self.yArr addObjectsFromArray:@[@"0",@"20",@"40",@"60",@"80",@"100"]];
break;
case 9://以百万为单位 10,000000 上限制十亿
self.level = 1000000;
self.yUnit = @"(千万)";
[self.yArr addObjectsFromArray:@[@"0",@"10",@"20",@"30",@"40",@"50"]];
break;
default:
break;
}
}
}5、绘制柱状图
-(void)drawRect:(CGRect)rect{
//创建画布
CGContextRef ctr = UIGraphicsGetCurrentContext();
NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
paragraph.alignment = NSTextAlignmentRight;
NSDictionary *attribute = @{NSFontAttributeName:[UIFont systemFontOfSize:12],NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:[UIColor colorWithRed:187.0/255.0 green:187.0/255.0 blue:187.0/255.0 alpha:1.0]};
[self.yUnit drawInRect:CGRectMake(2*ADAPTER_WIDTH, BarChartBoxH - 22*ADAPTER_HEIGHT, BarChartLeftSpacing - 4*ADAPTER_WIDTH, 22*ADAPTER_HEIGHT) withAttributes:attribute];
//绘制区域轴
for (int i = 0 ; i < 6 ; i++) {//横线
[[UIColor colorWithRed:187.0/255.0 green:187.0/255.0 blue:187.0/255.0 alpha:1.0]set];
CGContextSetLineWidth(ctr, 0.5);
CGContextMoveToPoint(ctr, BarChartLeftSpacing, BarChartBoxH * (i + 1));
CGContextAddLineToPoint(ctr, self.frame.size.width - BarChartRightSpacing, BarChartBoxH * (i + 1));
CGContextStrokePath(ctr);
//绘制y轴刻度
[self.yArr[5 - i] drawInRect:CGRectMake(8, BarChartBoxH * (i + 1) - 7, BarChartLeftSpacing - 10, 22) withAttributes:attribute];
}
//绘制x轴
for (int i = 0 ; i < 6 ; i++) {//x轴刻度线
CGContextSetLineWidth(ctr, 0.5);
[[UIColor colorWithRed:187.0/255.0 green:187.0/255.0 blue:187.0/255.0 alpha:1.0]set];
CGContextMoveToPoint(ctr, BarChartLeftSpacing + i * BarChartBoxW, BarChartBoxH * 6);
CGContextAddLineToPoint(ctr, BarChartLeftSpacing + i * BarChartBoxW, BarChartBoxH * 6 + 3);
CGContextStrokePath(ctr);
}
for (int i = 0 ; i < 5 ; i++) {
//绘制X轴坐标
NSDictionary *dataDic = self.dataResource[i];
NSString *monthStr = dataDic[@"classification"];
NSString *moneyStr = dataDic[@"money"];
CGFloat num = [moneyStr floatValue] / self.level;
CGFloat scale = 0.0;
if([self.type isEqualToString:@"f"]){
scale = num / 50;
}else{
scale = num / 100;;
}
[self drawMyRectWithCornerX:BarChartLeftSpacing + BarChartBoxW * (i + 0.5) - barChartColumnW * 0.5 andY:BarChartBoxH * 6 andRadius:barChartColumnW / 2 andWidth:barChartColumnW andHeight:- 5 * scale * BarChartBoxH andCtr:ctr andColor:[self colorWithIndex:i]];
//绘制柱子
NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
paragraph.alignment = NSTextAlignmentCenter;
NSDictionary *attribute = @{NSFontAttributeName:[UIFont systemFontOfSize:12],NSParagraphStyleAttributeName:paragraph,NSForegroundColorAttributeName:[UIColor colorWithRed:187.0/255.0 green:187.0/255.0 blue:187.0/255.0 alpha:1.0]};
[monthStr drawInRect:CGRectMake(BarChartLeftSpacing + BarChartBoxW * i, BarChartBoxH * 6 + 5 , BarChartBoxW, 22) withAttributes:attribute];
}
}
//每条柱子的颜色
-(UIColor *)colorWithIndex:(int)index{
UIColor *color;
switch (index) {
case 0:
color = [UIColor colorWithRed:252/255.0 green:90/255.0 blue:133/255.0 alpha:1.0];
break;
case 1:
color = [UIColor colorWithRed:254/255.0 green:215/255.0 blue:210/255.0 alpha:1.0];
break;
case 2:
color = [UIColor colorWithRed:254/255.0 green:198/255.0 blue:76/255.0 alpha:1.0];
break;
case 3:
color = [UIColor colorWithRed:57/255.0 green:58/255.0 blue:58/255.0 alpha:1.0];
break;
case 4:
color = [UIColor colorWithRed:93/255.0 green:171/255.0 blue:127/255.0 alpha:1.0];
break;
default:
break;
}
return color;
}
/**
* 绘制圆弧矩形
*
* @param x 起始点的横坐标
* @param y 起始点的纵坐标
* @param radius 圆角弧形的半径
* @param width 矩形的宽度
* @param height 矩形的高度
* @param ctr 绘图上下文
* @param color 背景颜色
*/
- (void)drawMyRectWithCornerX:(CGFloat)x andY:(CGFloat)y andRadius:(CGFloat)radius andWidth:(CGFloat)width andHeight:(CGFloat)height andCtr:(CGContextRef)ctr andColor:(UIColor *)color{
[color set];
CGContextMoveToPoint(ctr, x, y);
if(radius > fabs(height)){
CGContextAddArc(ctr, x, y, fabs(height), M_PI * 2, M_PI, 1);
}else{
CGContextAddLineToPoint(ctr, x, y - fabs(height) + radius);
CGContextAddArc(ctr, x + width / 2, y - fabs(height) + radius, radius, - M_PI , 0, 0);
CGContextAddLineToPoint(ctr, x + width, y - fabs(height) + radius);
CGContextAddLineToPoint(ctr, x + width, y);
CGContextAddLineToPoint(ctr, x, y);
}
CGContextFillPath(ctr);
}
博主现在还在研究柱状图的动画，之后效果出来会一起po出来滴~~~
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
