iOS开发Charts图形绘制框架使用

释放双眼,带上耳机,听听看~!

前言

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文档去学习,这样反而会更全一些。

最后附上我的代码

人已赞赏
iOS文章

IOS开发图片设置毛玻璃效果

2020-2-2 1:23:30

iOS文章

iOS开发SDWebImage-5.1类结构

2020-2-2 2:57:13

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索