前言

charts是一款图形绘制框架，可以绘制折线图、柱状图、k线图、饼状图、雷达图等。上一篇文章我们讲了一下这个框架怎么集成到项目中（iOS-在OC项目中集成Charts图形绘制框架)。下面我们将介绍怎么使用这个框架。

折线图

//绘制折现图

+(LineChartView *)drawLineChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate charts:(NSArray <HJChartsGraphModel *>*)charts chartsLabel:(NSString *)chartsLabel{
    LineChartView *view = [[LineChartView alloc]initWithFrame:frame];
    view.delegate = delegate;
    NSMutableArray *graphs = [NSMutableArray array];
    for (int i = 0; i<charts.count; i++) {
        NSArray *values = [self getLineDataEntriesWithChart:charts[i]];
        LineChartDataSet *dataSet = [[LineChartDataSet alloc] initWithValues:values label:charts[i].label];
        dataSet.colors = charts[i].colors;
        //设置相关属性
        [graphs addObject:dataSet];
    }
    LineChartData *chartData = [[LineChartData alloc] initWithDataSets:graphs];
//    ChartLimitLine *chartLimit = [[ChartLimitLine alloc] initWithLimit:60];
//    [view.rightAxis addLimitLine:chartLimit];
    view.data = chartData;
    view.chartDescription.text = chartsLabel;
    [view animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    [self setLineChartsUI:view];
    return view;
}
+(LineChartView *)drawLineChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate chart:(HJChartsGraphModel *)chart chartsLabel:(NSString *)chartsLabel{
    LineChartView *view = [[LineChartView alloc]initWithFrame:frame];
    view.delegate = delegate;
    LineChartDataSet *dataSet = [[LineChartDataSet alloc] initWithValues:[self getLineDataEntriesWithChart:chart] label:chart.label];
    dataSet.colors = chart.colors;
    LineChartData *chartData = [[LineChartData alloc] initWithDataSet:dataSet];
    view.data = chartData;
    view.chartDescription.text = chartsLabel;
    [view animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return view;
}

+(NSMutableArray *)getLineDataEntriesWithChart:(HJChartsGraphModel *)chart{
    NSMutableArray *dataEntries = [NSMutableArray array];
    for (int i = 0; i<chart.entries.count; i++) {
        HJChartsEntryModle *modle = chart.entries[i];
        UIImage *image = modle?[UIImage imageNamed:modle.iconName]:nil;
        ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:modle.x y:modle.y icon:image data:modle.data];
        [dataEntries addObject:entry];
    }
    return dataEntries;
}

其中HJChartsGraphModel一条图形的对象模型

#import "HJBasicModle.h"
#import "HJChartsEntryModle.h"
#import <UIKit/UIKit.h>


@interface HJChartsGraphModel : HJBasicModle

//数据元素数组
@property (nonatomic,strong) NSArray *entries;

//图形描述
@property (nonatomic,copy) NSString *label;


//图形分段颜色,一个则为单色
@property (nonatomic,strong)  NSArray *colors;
@end

数据元素数组为每条图形每个点的数组，其中每个点用模型（HJChartsEntryModle）表示

#import "HJBasicModle.h"

@interface HJChartsEntryModle : HJBasicModle
//****折线图部分****
//包括X 、Y、data、iconName
-(instancetype)initWithLineX:(double)X Y:(double)Y iconName:(NSString *)iconName data:(id)data;
-(instancetype)initWithLineX:(double)X Y:(double)Y;
/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  x轴数值
 */
@property (nonatomic,assign) double x;
/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  Y轴数值
 */
@property (nonatomic,assign) double y;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  图标名称
 */
@property (nonatomic,strong) NSString *iconName;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  携带数据对象
 */
@property (nonatomic,strong) id data;


//*****柱状图***
//包括X 、Y、values、data、iconName、label
-(instancetype)initWithBarX:(double)X values:(NSArray <NSNumber *>*)values label:(NSString *)label iconName:(NSString *)iconName data:(id)data;
-(instancetype)initWithBarX:(double)X Y:(double)Y label:(NSString *)label iconName:(NSString *)iconName data:(id)data;;
-(instancetype)initWithBarX:(double)X Y:(double)Y;
-(instancetype)initWithBarX:(double)X values:(NSArray <NSNumber *>*)values;
/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  柱状分段值
 */
@property (nonatomic,strong) NSArray *values;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  每段柱状的标签
 */
@property (nonatomic,strong) NSString *label;

//****K线图部分****

//包括X 、shadowH、shadowL、open、close、data、iconName
-(instancetype)initWithCandleX:(double)X iconName:(NSString *)iconName data:(id)data shadowH:(double)shadowH shadowL:(double)shadowL open:(double)open close:(double)close;
-(instancetype)initWithCandleX:(double)X shadowH:(double)shadowH shadowL:(double)shadowL open:(double)open close:(double)close;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  最高值
 */
@property (nonatomic,assign) double shadowH;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  最低值
 */
@property (nonatomic,assign) double shadowL;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  开盘值
 */
@property (nonatomic,assign) double open;

/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  收盘值
 */
@property (nonatomic,assign) double close;

//****饼状图部分****
//包括value、data、iconName、label
-(instancetype)initWithPieIconName:(NSString *)iconName data:(id)data label:(NSString *)label value:(double)value;

-(instancetype)initWithPieValue:(double)value;
/**
 *  @Author 黄坚, 2017-3-17 9:00:37
 *
 *  饼、雷达图值
 */
@property (nonatomic,assign) double value;


//****雷达图部分****
//包括value、data
-(instancetype)initWithRadarData:(id)data label:(NSString *)label value:(double)value;
-(instancetype)initWithRadarValue:(double)value;

@end

柱状图

//绘制柱状图

+(BarChartView *)drawBarChartWithFram:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate chart:(HJChartsGraphModel *)chart chartsLabel:(NSString *)chartsLabel{
    BarChartView *barView = [[BarChartView alloc] initWithFrame:frame];
    barView.delegate = delegate;
    NSMutableArray *entries = [self getBarDataEntriesWithChart:chart];
    BarChartDataSet *dataSet = [[BarChartDataSet alloc] initWithValues:entries label:chart.label];
    dataSet.colors = chart.colors;
    BarChartData *chartData = [[BarChartData alloc] initWithDataSet:dataSet];
    chartData.barWidth = 0.25;
    [chartData groupBarsFromX:0.85 groupSpace:0.25 barSpace:0];
    barView.data = chartData;
    barView.chartDescription.text = chartsLabel;
    [barView animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return barView;
}
+(BarChartView *)drawBarChartWithFram:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate charts:(NSArray <HJChartsGraphModel *>*)charts chartsLabel:(NSString *)chartsLabel{
    BarChartView *barView = [[BarChartView alloc] initWithFrame:frame];
    barView.delegate = delegate;
    NSMutableArray *dataSets = [NSMutableArray array];
    for (int i = 0; i<charts.count; i++) {
        NSArray *values = [self getBarDataEntriesWithChart:charts[i]];
        BarChartDataSet *dataSet = [[BarChartDataSet alloc] initWithValues:values label:charts[i].label];
        dataSet.colors = charts[i].colors;
        //设置相关属性
        [dataSets addObject:dataSet];
    }
    BarChartData *chartData = [[BarChartData alloc] initWithDataSets:dataSets];
    chartData.barWidth = 0.25;
    [chartData groupBarsFromX:0.85 groupSpace:0.25 barSpace:0];
    
    barView.data = chartData;
    barView.chartDescription.text = chartsLabel;
    [barView animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return barView;
}

+(NSMutableArray *)getBarDataEntriesWithChart:(HJChartsGraphModel *)chart{
    NSMutableArray *dataEntries = [NSMutableArray array];
    for (int i = 0; i<chart.entries.count; i++) {
        HJChartsEntryModle *modle = chart.entries[i];
        UIImage *image = modle?[UIImage imageNamed:modle.iconName]:nil;
        BarChartDataEntry *entry;
        if (modle.values) {
            entry = [[BarChartDataEntry alloc] initWithX:modle.x yValues:modle.values icon:image data:modle.data];
        }else{
           entry = [[BarChartDataEntry alloc] initWithX:modle.x y:modle.y icon:image data:modle.data];
        }
        [dataEntries addObject:entry];
    }
    return dataEntries;
}

代码基本相似，需要注意BarChartDataEntry、BarChartDataSet、BarChartData这些类名和折线图不同，以下几种图形也类似。

k线图

//绘制K线
+(CandleStickChartView *)drawCandleStickChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate chart:(HJChartsGraphModel *)chart chartsLabel:(NSString *)chartsLabel{
    CandleStickChartView *candleStick = [[CandleStickChartView alloc] initWithFrame:frame];
    candleStick.delegate = delegate;
    NSMutableArray *entries = [self getCandleDataEntriesWithChart:chart];
    CandleChartDataSet *dataSet = [[CandleChartDataSet alloc] initWithValues:entries label:chart.label];
    dataSet.colors = chart.colors;
    CandleChartData *chartData = [[CandleChartData alloc] initWithDataSet:dataSet];
    candleStick.data = chartData;
    candleStick.chartDescription.text = chartsLabel;
    [candleStick animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return candleStick;
}
+(CandleStickChartView *)drawCandleStickChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate charts:(NSArray <HJChartsGraphModel *>*)charts chartsLabel:(NSString *)chartsLabel{
    CandleStickChartView *candleStick = [[CandleStickChartView alloc] initWithFrame:frame];
    candleStick.delegate = delegate;
    NSMutableArray *dataSets = [NSMutableArray array];
    for (int i = 0; i<charts.count; i++) {
        NSArray *values = [self getCandleDataEntriesWithChart:charts[i]];
        CandleChartDataSet *dataSet = [[CandleChartDataSet alloc] initWithValues:values label:charts[i].label];
        dataSet.colors = charts[i].colors;
        //设置相关属性
        [dataSets addObject:dataSet];
    }
    CandleChartData *chartData = [[CandleChartData alloc] initWithDataSets:dataSets];
    candleStick.data = chartData;
    candleStick.chartDescription.text = chartsLabel;
    [candleStick animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return candleStick;
}


+(NSMutableArray *)getCandleDataEntriesWithChart:(HJChartsGraphModel *)chart{
    NSMutableArray *dataEntries = [NSMutableArray array];
    for (int i = 0; i<chart.entries.count; i++) {
        HJChartsEntryModle *modle = chart.entries[i];
        UIImage *image = modle?[UIImage imageNamed:modle.iconName]:nil;
        CandleChartDataEntry *entry = [[CandleChartDataEntry alloc]initWithX:modle.x shadowH:modle.shadowH shadowL:modle.shadowL open:modle.open close:modle.close icon:image data:modle.data];
        [dataEntries addObject:entry];
    }
    return dataEntries;
}

饼状图

//绘制饼状图
+(PieChartView *)drawPieChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate chart:(HJChartsGraphModel *)chart chartsLabel:(NSString *)chartsLabel{
    PieChartView *pieView = [[PieChartView alloc] initWithFrame:frame];
    pieView.delegate = delegate;
    NSMutableArray *entries = [self getPieDataEntriesWithChart:chart];
    PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:entries label:chart.label];
    dataSet.colors = chart.colors;
    PieChartData *chartData = [[PieChartData alloc] initWithDataSet:dataSet];
    pieView.data = chartData;
    pieView.chartDescription.text = chartsLabel;
    [pieView animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return pieView;
}

//+(PieChartView *)drawPieChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate charts:(NSArray <HJChartsGraphModel *>*)charts chartsLabel:(NSString *)chartsLabel{
//    PieChartView *pieView = [[PieChartView alloc] initWithFrame:frame];
//    pieView.delegate = delegate;
//    NSMutableArray *dataSets = [NSMutableArray array];
//    for (int i = 0; i<charts.count; i++) {
//        NSArray *values = [self getPieDataEntriesWithChart:charts[i]];
//        c *dataSet = [[PieChartDataSet alloc] initWithValues:values label:charts[i].label];
//        dataSet.colors = charts[i].colors;
//        //设置相关属性
//        [dataSets addObject:dataSet];
//    }
//    PieChartData *chartData = [[PieChartData alloc] initWithDataSets:dataSets];
//    pieView.data = chartData;
//    pieView.chartDescription.text = chartsLabel;
//    //[self setPieChartsUI:pieView];
//    [pieView animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
//    return pieView;
//}
//此处做了修改，绘制饼状图的时候不能同时绘制多张饼状图，和折线图会有点区别。否则会越界报错。但是可以调用PieChartData *chartData = [[PieChartData alloc] initWithDataSets:dataSets];这个方法，dataSets传只有一个dataset元素的数组。

+(NSMutableArray *)getPieDataEntriesWithChart:(HJChartsGraphModel *)chart{
    NSMutableArray *dataEntries = [NSMutableArray array];
    for (int i = 0; i<chart.entries.count; i++) {
        HJChartsEntryModle *modle = chart.entries[i];
        UIImage *image = modle?[UIImage imageNamed:modle.iconName]:nil;
        PieChartDataEntry *entry = [[PieChartDataEntry alloc]initWithValue:modle.value label:modle.label icon:image data:modle.data];
        [dataEntries addObject:entry];
    }
    return dataEntries;
}

2017-6-8日
注意：此处做了修改，绘制饼状图的时候不能同时绘制多张饼图，这点和折线图会有点区别。否则会越界报错。但是可以调用

PieChartData *chartData = [[PieChartData alloc] initWithDataSets:dataSets];

这个方法，dataSets数组只能包含一个PieChartDataSet元素。

雷达图

//绘制雷达图
+(RadarChartView *)drawRadarChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate chart:(HJChartsGraphModel *)chart chartsLabel:(NSString *)chartsLabel{
    RadarChartView *radar = [[RadarChartView alloc] initWithFrame:frame];
    radar.delegate = delegate;
    NSMutableArray *entries = [self getRadarDataEntriesWithChart:chart];
    RadarChartDataSet *dataSet = [[RadarChartDataSet alloc] initWithValues:entries label:chart.label];
    dataSet.colors = chart.colors;
    RadarChartData *chartData = [[RadarChartData alloc] initWithDataSet:dataSet];
    radar.data = chartData;
    radar.chartDescription.text = chartsLabel;
    [radar animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return radar;
}
+(RadarChartView *)drawRadarChartWithFrame:(CGRect)frame delegate:(id<ChartViewDelegate>)delegate charts:(NSArray <HJChartsGraphModel *>*)charts chartsLabel:(NSString *)chartsLabel{
    RadarChartView *radar = [[RadarChartView alloc] initWithFrame:frame];
    radar.delegate = delegate;
    NSMutableArray *dataSets = [NSMutableArray array];
    for (int i = 0; i<charts.count; i++) {
        NSArray *values = [self getRadarDataEntriesWithChart:charts[i]];
        RadarChartDataSet *dataSet = [[RadarChartDataSet alloc] initWithValues:values label:charts[i].label];
        dataSet.colors = charts[i].colors;
        //设置相关属性
        [dataSets addObject:dataSet];
    }
    RadarChartData *chartData = [[RadarChartData alloc] initWithDataSets:dataSets];
    radar.data = chartData;
    radar.chartDescription.text = chartsLabel;
    [radar animateWithYAxisDuration:0.5 easingOption:ChartEasingOptionEaseInBounce];
    return radar;
}


+(NSMutableArray *)getRadarDataEntriesWithChart:(HJChartsGraphModel *)chart{
    NSMutableArray *dataEntries = [NSMutableArray array];
    for (int i = 0; i<chart.entries.count; i++) {
        HJChartsEntryModle *modle = chart.entries[i];
        RadarChartDataEntry *entry = [[RadarChartDataEntry alloc]initWithValue:modle.value data:modle.data];
        [dataEntries addObject:entry];
    }
    return dataEntries;
}

设置图形样式

以上代码只是将图形绘制出来，还需要对图形样式进行设置，比如设置X轴位置、线粗细以及是否有网格线等等。在这里我推荐一篇文章，里面介绍了各种图形样式的设置，当然你们还可以通过api文档去学习，这样反而会更全一些。

最后附上我的代码。