Charts图表库的简单使用

项目中原有的Charts是Swift 2.3版本的,这周我们要把图表库更新到3.0,不过昨天更新完,有个消息说想要使用百度的Eharts........

项目没有使用cocoapods,直接把源码拖进来的.所以我直接从git上下载下来Charts,将图表库源码替换到项目里面.

如果你也是上面那样的话,那么需要注意,如下图:

这个是告诉swift不使用遗留下来的语言版本.

先从git上下载好项目,目录如下:

拖进项目里面我这里直接报错了,内容就是我上面说的,这里报错说是没有指定,那我们就选择NO.然后再次编译.

再次编译完后,我这里报了10个错误,原因是因为没有导入UIKit框架,那么我们就一次对每个文件都进行import UIKit,最后编译成功.没问题了.

我们到ViewController中,导入头文件ChartsStudy-Swift.h.该头文件是系统帮我们自动生成的.具体可以在设置里找到:

下面,我们就先从最简单的柱状图开始.

#import "ViewController.h"
#import "ChartsStudy-Swift.h"

@interface ViewController () {
    BarChartView *_barChart;
}
@property (nonatomic, strong) NSArray *barLabel;
@property (nonatomic, strong) NSArray *barData;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //柱状图数据
    //X轴是星期,周一至周日
    //Y是金额
    self.barLabel = @[@"星期一", @"星期二", @"星期三", @"星期四", @"星期五", @"星期六", @"星期日"];
    self.barData = @[@12.5, @56.7, @0.0, @0.0, @8.8, @4.13, @7.88];
    
    [self nj_BarChartView];
}

- (void)nj_BarChartView
{
    _barChart = [[BarChartView alloc] initWithFrame:CGRectMake(15, 15, 400, 300)];
    [self.view addSubview:_barChart];
    
    [self setBarDataWithCount:self.barData.count];
}

- (void)setBarDataWithCount:(NSInteger)count
{
    
    /*
     BarChartDataEntry: 表示一个点,这个点需要x,y两个值来进行确定该点的位置.该点就是该柱状图的顶部的中点.
     BarChartDataSet: 这个表示上面那一堆点的一个集合.代表了一组数据.这里的组比如说是某公司A部门的业绩走向,因为一个柱状图里可能有数个部门的业绩,所以可能会也有好多组数据.
     BarChartData: 这个类表示一组或多组数据融合成一条数据,交给柱状图进行显示.
     */
    
    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    
    for (NSInteger i = 0; i < count; ++i) {
        //实例化每个数据点,放到yVals数组中.
        [yVals addObject:[[BarChartDataEntry alloc] initWithX:(double)i y:[self.barData[i] doubleValue]]];
    }
    //把存放了数据点的数组实例化为一个数据集合对象
    BarChartDataSet *set = [[BarChartDataSet alloc] initWithValues:yVals label:@"set"];
    //把一个或多个的数据集合对象实例化为一个数据对象
    BarChartData *data = [[BarChartData alloc] initWithDataSet:set];
    //把数据对象交给柱状图进行显示.
    _barChart.data = data;
    //最后加了一个小动画.动画也很多,可以跳到头文件里面去查找.
    [_barChart animateWithXAxisDuration:1.0];
}
@end
复制代码

运行后如下图:

这是6的尺寸,横屏下的.

这个样子的图,肯定不是你想要的,不过因为它的属性太多了,我就简单的用这个图来进行一下解析吧:

转载于:https://juejin.im/post/5a376c5df265da431281038a