前言

charts是一款圖形繪制框架，可以繪制折線圖、柱狀圖、k線圖、餅狀圖、雷達圖等。上一篇文章我們講了一下這個框架怎么集成到項目中（iOS-在OC項目中集成Charts圖形繪制框架)。下面我們將介紹怎么使用這個框架。

折線圖

//繪制折現(xiàn)圖

+(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;
        //設(shè)置相關(guān)屬性
        [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

//數(shù)據(jù)元素數(shù)組
@property (nonatomic,strong) NSArray *entries;

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


//圖形分段顏色,一個則為單色
@property (nonatomic,strong)  NSArray *colors;
@end

數(shù)據(jù)元素數(shù)組為每條圖形每個點的數(shù)組，其中每個點用模型（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軸數(shù)值
 */
@property (nonatomic,assign) double x;
/**
 *  @Author 黃堅, 2017-3-17 9:00:37
 *
 *  Y軸數(shù)值
 */
@property (nonatomic,assign) double y;

/**
 *  @Author 黃堅, 2017-3-17 9:00:37
 *
 *  圖標名稱
 */
@property (nonatomic,strong) NSString *iconName;

/**
 *  @Author 黃堅, 2017-3-17 9:00:37
 *
 *  攜帶數(shù)據(jù)對象
 */
@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;
        //設(shè)置相關(guān)屬性
        [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;
        //設(shè)置相關(guān)屬性
        [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;
//        //設(shè)置相關(guān)屬性
//        [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;
//}
//此處做了修改，繪制餅狀圖的時候不能同時繪制多張餅狀圖，和折線圖會有點區(qū)別。否則會越界報錯。但是可以調(diào)用PieChartData *chartData = [[PieChartData alloc] initWithDataSets:dataSets];這個方法，dataSets傳只有一個dataset元素的數(shù)組。

+(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日
注意：此處做了修改，繪制餅狀圖的時候不能同時繪制多張餅圖，這點和折線圖會有點區(qū)別。否則會越界報錯。但是可以調(diào)用

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

這個方法，dataSets數(shù)組只能包含一個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;
        //設(shè)置相關(guān)屬性
        [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;
}

設(shè)置圖形樣式

以上代碼只是將圖形繪制出來，還需要對圖形樣式進行設(shè)置，比如設(shè)置X軸位置、線粗細以及是否有網(wǎng)格線等等。在這里我推薦一篇文章，里面介紹了各種圖形樣式的設(shè)置，當然你們還可以通過api文檔去學(xué)習(xí)，這樣反而會更全一些。

最后附上我的代碼。