一、简介
UUChart是一个用于绘制图表的第三方,尤其适合去绘制折线图。自己在做一个高考相关的项目时,需要对近年来高考分数做一个展示,需要绘制折线图来表示出高考文科分数、理科分数的走势,因此学习了一下。
二、下载地址:https://github.com/ZhipingYang/UUChartView
三、使用
1.首先我们将下载下来的文件解压,里面有一个UUChar的文件夹,然后将整个文件夹都拖到项目里面。
2.引入#import "UUChart.h"
3.遵守UUChart的数据源代理<UUChartDataSource>
4.要实现的代理方法
//横坐标标题数组
- (NSArray *)chartConfigAxisXLabel:(UUChart *)chart
{
NSArray *arr = @[@"2010",@"2011",@"2012",@"2013",@"2014",@"2015"];
return arr;
}
图表X坐标效果如下图:
图表上要显示的2组数据(2个数组,文科和理科)
//数值多重数组
- (NSArray *)chartConfigAxisYValue:(UUChart *)chart
{
NSArray *ary1 = @[@"550",@"555",@"150",@"309",@"420",@"700"];
NSArray *ary2 = @[@"588",@"340",@"54",@"230",@"160",@"532"];
return @[ary1,ary2];
}
上面2个方法是必须实现的。
#pragma mark - @optional
//颜色数组
- (NSArray *)chartConfigColors:(UUChart *)chart
{
return @[[UUColor green],[UUColor red],[UUColor brown]];
}
//显示数值范围
- (CGRange)chartRange:(UUChart *)chart
{
// Y轴上(高考分数满分750)
return CGRangeMake(750, 0);
}
#pragma mark 折线图专享功能
//标记数值区域
- (CGRange)chartHighlightRangeInLine:(UUChart *)chart
{
return CGRangeMake(250, 750);
}
设置图表高亮范围,效果如下:
//判断显示最大最小值
- (BOOL)chart:(UUChart *)chart showMaxMinAtIndex:(NSInteger)index
{
return YES;
}
返回YES,图表上面会显示最大值和最小值。效果如下:
那么问题来,如果我们想要5个数值都标记出来,而不只是最大值和最小值怎么办呢?
我们需要稍微改动一下UUChart的源码了,找到UULineChar.m文件
- (void)addPoint:(CGPoint)point index:(NSInteger)index isShow:(BOOL)isHollow value:(CGFloat)value 方法,我们只需要把if else判断注释即可。
- (void)addPoint:(CGPoint)point index:(NSInteger)index isShow:(BOOL)isHollow value:(CGFloat)value
{
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(5, 5, 8, 8)];
view.center = point;
view.layer.masksToBounds = YES;
view.layer.cornerRadius = 4;
view.layer.borderWidth = 2;
view.layer.borderColor = [[_colors objectAtIndex:index] CGColor]?[[_colors objectAtIndex:index] CGColor]:[UUColor green].CGColor;
// if (isHollow) {
// view.backgroundColor = [UIColor whiteColor];
// }else{
view.backgroundColor = [_colors objectAtIndex:index]?[_colors objectAtIndex:index]:[UUColor green];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(point.x-UUTagLabelwidth/2.0, point.y-UULabelHeight*2, UUTagLabelwidth, UULabelHeight)];
label.font = [UIFont systemFontOfSize:10];
label.textAlignment = NSTextAlignmentCenter;
label.textColor = view.backgroundColor;
label.text = [NSString stringWithFormat:@"%d",(int)value];
[self addSubview:label];
// }
[self addSubview:view];
}
这样,再来看看图表的变化:
最后,我们来看一下控制器完整的代码:
//
// SchoolDetailViewController.m
#import "SchoolDetailViewController.h"
#import "UUChart.h"
@interface SchoolDetailViewController ()<UUChartDataSource>
@property(nonatomic,weak)UIView *chartView;
@end
@implementation SchoolDetailViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
UUChart *chartView = [[UUChart alloc]initWithFrame:CGRectMake(10, 74, [UIScreen mainScreen].bounds.size.width-20, 150)
dataSource:self
style:UUChartStyleLine];
[chartView showInView:self.view];
self.chartView = chartView;
}
#pragma mark - UUChartDataSource
//横坐标标题数组
- (NSArray *)chartConfigAxisXLabel:(UUChart *)chart
{
NSArray *arr = @[@"2010",@"2011",@"2012",@"2013",@"2014",@"2015"];
return arr;
}
//数值多重数组
- (NSArray *)chartConfigAxisYValue:(UUChart *)chart
{
NSArray *ary1 = @[@"550",@"555",@"150",@"309",@"420",@"700"];
NSArray *ary2 = @[@"588",@"340",@"54",@"230",@"160",@"532"];
return @[ary1,ary2];
}
#pragma mark - @optional
//颜色数组
- (NSArray *)chartConfigColors:(UUChart *)chart
{
return @[[UUColor green],[UUColor red],[UUColor brown]];
}
//显示数值范围
- (CGRange)chartRange:(UUChart *)chart
{
// Y轴上(高考分数满分750)
return CGRangeMake(750, 0);
}
#pragma mark 折线图专享功能
//标记数值区域
- (CGRange)chartHighlightRangeInLine:(UUChart *)chart
{
return CGRangeZero;
}
//判断显示横线条
- (BOOL)chart:(UUChart *)chart showHorizonLineAtIndex:(NSInteger)index
{
return YES;
}
//判断显示最大最小值
- (BOOL)chart:(UUChart *)chart showMaxMinAtIndex:(NSInteger)index
{
return YES;
}
@end