第三方图表库UUChart的简单使用

一、简介

    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