前言
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文档去学习，这样反而会更全一些。
最后附上我的代码。
网友评论