1、Charts 简介
使用第三方框架 Charts 绘制 iOS 图表。GitHub 源码 Charts
Charts 是一款用于绘制图表的框架，可以绘制柱状图、折线图、K线图、饼状图等。Charts 只有 Swift 版本。
-
LineChart (with legend, simple design)
-
LineChart (with legend, simple design)
-
LineChart (cubic lines)
-
LineChart (gradient fill)
-
Combined-Chart (bar- and linechart in this case)
-
BarChart (with legend, simple design)
-
BarChart (grouped DataSets)
-
Horizontal-BarChart
-
PieChart (with selection, ...)
-
ScatterChart (with squares, triangles, circles, ... and more)
-
CandleStickChart (for financial data)
-
BubbleChart (area covered by bubbles indicates the value)
-
RadarChart (spider web chart)
2、在项目中集成 Charts
2.1 在 OC 项目中手动导入 Charts 框架
-
1、下载 Charts 框架。
-
解压后的文件夹里面的内容是这个样子的，如下图。
-
下载完成后，仔细看一下所需环境，很重要！如下图。
-
在自己的工程中使用的时候可以删掉框架中的 Demo 等文件，如下图。
-
-
2、新建工程，导入 Charts.xcodeproj 工程
-
新建工程，取名为 ChartsDemo。复制 Charts 整个文件到 ChartsDemo 工程中
-
将 Charts 文件夹中的 Charts.xcodeproj 工程文件导入到 ChartsDemo 工程中，注意导入的是 Charts.xcodeproj 工程，而不是 Charts 的文件夹，如下图。
-
-
3、编译导入的 Charts.xcodeproj 工程
-
选中 Charts.xcodeproj 工程，在 TARGETS => Build Setting => Architectures => Base SDK 中设置 SDKs 为 iOS 环境。
-
在编译选项中选中 Charts => Generic iOS Devices 进行编译，编译成功后可以看到 Charts.xcodeproj 工程的 Products 中 Charts.framework 由红色变为黑色。
-
-
4、添加 Charts.framework
-
在 ChartsDemo 工程的 TARGETS => General => Embedded Binaries 中，点击 + 号添加 iOS 的 Charts.framework，如下图。
-
-
5、建立 OC 和 Swift 的桥接文件
-
在 ChartsDemo 工程中新建一个 Swift 文件，名字随便取，这时候会提示是否建立桥接文件，直接选 Create Bridging Header 选项，如下图。
-
创建完成后删除刚才创建的 Swift 文件，然后在桥接头文件中添加 Charts 引入。
-
在使用 Charts 的文件中引入桥接头文件。引入完成之后，选择 iOS 模拟器编译一下，如果有错，Clean 一下再次编译，编译没有错误说明导入成功。
-
-
6、测试
-
在 ViewController.m 中进行测试，代码如下。
BarChartView *barChatView = [[BarChartView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)];
barChatView.backgroundColor = [UIColor cyanColor];
[self.view addSubview:barChatView]; -
效果如下。由于没有给数据，所以显示的是 No chart date aviailable。至此，集成 Charts 完毕。
-
3、绘制折线图
3.1 LineChart 设置
-
1、属性设置
-
在控制器中我们首先需要创建一个 LineChartView 的对象，在 Charts 框架中折线图用到的类是 LineChartView。
self.lineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
self.lineChartView.center = self.view.center;
[self.view addSubview:self.lineChartView]; // 设置基本样式
self.lineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.lineChartView.delegate = self; // 设置代理，需遵守 ChartViewDelegate 协议
self.lineChartView.noDataText = @"暂无数据"; // 设置交互样式
self.lineChartView.scaleYEnabled = NO; // 取消 Y 轴缩放
self.lineChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
self.lineChartView.dragEnabled = YES; // 启用拖拽图标
self.lineChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
self.lineChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显 -
在 LineChartView 中有两个属性 rightAxis 和 leftAxis 属于 ChartYAxis 类，是分别用来设置左边 Y 轴和右边 Y 轴的，可以根据自己的需求去设置。
self.lineChartView.rightAxis.enabled = NO; // 不绘制右边轴
ChartYAxis *leftAxis = self.lineChartView.leftAxis; // 获取左边 Y 轴
leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
leftAxis.axisMinValue = 0; // 设置 Y 轴的最小值
leftAxis.axisMaxValue = 105; // 设置 Y 轴的最大值
leftAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 Y 轴线宽
leftAxis.axisLineColor = [UIColor blackColor]; // 设置 Y 轴颜色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label 文字位置
leftAxis.valueFormatter = [[YAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
leftAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // label 文字字体
leftAxis.labelCount = 5; // label 数量，数值不一定，
// 如果 forceLabelsEnabled 等于 YES,
// 则强制绘制制定数量的 label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; // 设置虚线样式的网格线
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // 网格线颜色
leftAxis.gridAntialiasEnabled = YES; // 网格线开启抗锯齿 -
在这里要注意的是，一般情况下 y 轴的数据是 double 类型的并且是没有特殊符号的，如果想要做到像图中的那样的百分数类型是要去设置的，然后我们发现 ChartYAxis 类中有一个属性 valueFormatter，这个属性就是用来设置数据格式的，但比较麻烦的是这个属性必须遵循 IChartAxisValueFormatter 的协议，所以我们需要去自定义一个 YAxisValueFormatter 类来完成。
@import Charts; @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end @implementation YAxisValueFormatter /// 实现协议方法，返回 y 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 y 轴的值 return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
} @end -
y 轴设置完了，现在我们来设置 x 轴，在 LineChartView 中也有个属性 xAxis 使用来设置 x 轴的样式的，它属于 ChartXAxis 类，现在我们来创建它。
ChartXAxis *xAxis = self.lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 设置 X 轴的显示位置，默认是显示在上面的
xAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 X 轴线宽
xAxis.axisLineColor = [UIColor blackColor]; // 设置 X 轴颜色
xAxis.granularityEnabled = YES; // 设置重复的值不显示
xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
xAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
xAxis.drawGridLinesEnabled = NO; // 不绘制网格线
xAxis.gridColor = [UIColor clearColor]; // 网格线颜色 -
同样的一般情况下 x 轴的数据也是 double 类型的并且是没有特殊符号的，所以我们需要去自定义一个 XAxisValueFormatter 类来完成。
#import <Foundation/Foundation.h> @import Charts; @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end @implementation XAxisValueFormatter /// 实现协议方法，返回 x 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 x 轴的值 return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
} @end -
到这里我们 lineChartView 的 x 轴和 y 轴都设置好了，但是还少了一个选中数据滑动的时候值会变化的标签， LineChartView 中有个 marker 属性就是我们要找的，marker 属性遵循 IChartMarker 协议，是 id 类型，ChartMarkerView 和 ChartMarkerImage 都有遵循 IChartMarker 协议，都是可以用的，可以根据自己的需求自己选择。
ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
markerY.offset = CGPointMake(-999, -8);
markerY.chartView = self.lineChartView;
[markerY addSubview:self.markYLabel];
self.lineChartView.marker = markerY; - (UILabel *)markYLabel { if (!_markYLabel) {
_markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
_markYLabel.font = [UIFont systemFontOfSize:15.0];
_markYLabel.textAlignment = NSTextAlignmentCenter;
_markYLabel.text = @"";
_markYLabel.textColor = [UIColor whiteColor];
_markYLabel.backgroundColor = [UIColor grayColor];
}
return _markYLabel;
}
-
-
2、数据设置
-
折线图的数据 data 属性是属于 LineChartData 类，所以 setData 方法需要返回一个 LineChartData 的对象，但是在 LineChartData 的对象的初始化方法中
- (nonnull instancetype)initWithDataSets:(NSArray<id <IChartDataSet>> * _Nullable)dataSets发现还需要一个装有 LineChartDataSet 的数组，LineChartDataSet 其实就是每一条折线，而绘制每一条折线又需要数据，所以我们先从数据开始一步一步创建。NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
for (int i = 0; i < vals_count; i++) { double xValue = i + 1;
double yValue = arc4random() % 100; // 设置表格数据，x 轴和 y 轴的值
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:xValue y:yValue];
[chartVals1 addObject:entry];
} -
数据完成后，我们就要来创建折线了，创建 LineChartDataSet 对象，如果要只显示数据的最高点，需要设置 valueFormatter 和前面的一样，自定义一个 ChartMaxDataValueFormatter 类来完成。
@import Charts; @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter> - (instancetype)initWithYDataVals:(NSArray *)yVals; @end @interface ChartMaxDataValueFormatter () @property (nonatomic, strong) NSArray *yDataValueArray;
@property (nonatomic, assign) double maxDataSetIndex; @end @implementation ChartMaxDataValueFormatter - (instancetype)initWithYDataVals:(NSArray *)yVals {
if (self = [super init]) { self.yDataValueArray = yVals;
NSMutableArray *muArr = [NSMutableArray arrayWithArray:yVals];
[muArr sortUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
ChartDataEntry *entry1 =(ChartDataEntry *)obj1;
ChartDataEntry *entry2 =(ChartDataEntry *)obj2;
if (entry1.y >= entry2.y){
return NSOrderedAscending;
} else {
return NSOrderedDescending;
}
}];
self.maxDataSetIndex =((ChartDataEntry * )muArr[0]).x;
}
return self;
} /// 实现协议方法，只显示折线上数据的最大值
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { if (entry.x == self.maxDataSetIndex) {
return [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
} else {
return @"";
}
} @end -
最后还有个 ChartView 的选中数据代理方法，主要用来显示选中折线数据的时候 label 值的变化。
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
entry:(ChartDataEntry * _Nonnull)entry
highlight:(ChartHighlight * _Nonnull)highlight { // 设置滑动时 Y 值标签
self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y]; // 将点击的数据滑动到中间
[self.lineChartView centerViewToAnimatedWithXValue:entry.x
yValue:entry.y
axis:[self.lineChartView.data
getDataSetByIndex:highlight.dataSetIndex].axisDependency
duration:1.0];
}
-
3.2 LineChart 绘制
-
XAxisValueFormatter.h
/// 设置 X 轴 数据格式 @import Charts; @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end -
XAxisValueFormatter.m
@implementation XAxisValueFormatter /// 实现协议方法，返回 x 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 x 轴的值 return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
} @end -
YAxisValueFormatter.h
/// 设置 Y 轴 数据格式 @import Charts; @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end -
YAxisValueFormatter.m
@implementation YAxisValueFormatter /// 实现协议方法，返回 y 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 y 轴的值 return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
} @end -
ChartDataValueFormatter.h
/// 设置 折线显示的 数据格式 @import Charts; @interface ChartDataValueFormatter : NSObject <IChartValueFormatter> @end -
ChartDataValueFormatter.m
@implementation ChartDataValueFormatter /// 实现协议方法，返回折线拐点上显示的数据格式
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { return [NSString stringWithFormat:@"%.1f", entry.y];
} @end -
ChartMaxDataValueFormatter.h
/// 设置 折线显示的 数据格式，只显示最大值 @import Charts; @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter> - (instancetype)initWithYDataVals:(NSArray *)yVals; @end -
ChartMaxDataValueFormatter.m
@interface ChartMaxDataValueFormatter () @property (nonatomic, strong) NSArray *yDataValueArray;
@property (nonatomic, assign) double maxDataSetIndex; @end @implementation ChartMaxDataValueFormatter - (instancetype)initWithYDataVals:(NSArray *)yVals {
if (self = [super init]) { self.yDataValueArray = yVals;
NSMutableArray *muArr = [NSMutableArray arrayWithArray:yVals];
[muArr sortUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
ChartDataEntry *entry1 =(ChartDataEntry *)obj1;
ChartDataEntry *entry2 =(ChartDataEntry *)obj2;
if (entry1.y >= entry2.y){
return NSOrderedAscending;
} else {
return NSOrderedDescending;
}
}];
self.maxDataSetIndex =((ChartDataEntry * )muArr[0]).x;
}
return self;
} /// 实现协议方法，只显示折线上数据的最大值
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { if (entry.x == self.maxDataSetIndex) {
return [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
} else {
return @"";
}
} @end -
ViewController.m
#import "ChartsDemo-Bridging-Header.h" // 自定义数据格式
#import "YAxisValueFormatter.h"
#import "XAxisValueFormatter.h"
#import "ChartDataValueFormatter.h"
#import "ChartMaxDataValueFormatter.h" // 遵守协议
@interface ViewController () <ChartViewDelegate> // 折线图
@property (nonatomic, strong) LineChartView *lineChartView; // 滑动时 Y 值标签
@property (nonatomic,strong) UILabel *markYLabel; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1]; // 创建折线图
[self createdLineView]; // 设置折线图的数据
self.lineChartView.data = [self setData];
} // 创建折线图
- (void)createdLineView { // 初始化折线图对象
self.lineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
self.lineChartView.center = self.view.center;
[self.view addSubview:self.lineChartView]; // 设置基本样式
self.lineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.lineChartView.delegate = self; // 设置代理，需遵守 ChartViewDelegate 协议
self.lineChartView.noDataText = @"暂无数据"; // 设置交互样式
self.lineChartView.scaleYEnabled = NO; // 取消 Y 轴缩放
self.lineChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
self.lineChartView.dragEnabled = YES; // 启用拖拽图标
self.lineChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
self.lineChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显 // 设置滑动时 Y 值标签
ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
markerY.offset = CGPointMake(-999, -8);
markerY.chartView = self.lineChartView;
[markerY addSubview:self.markYLabel];
self.lineChartView.marker = markerY; // 设置 X 轴样式
ChartXAxis *xAxis = self.lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 设置 X 轴的显示位置，默认是显示在上面的
xAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 X 轴线宽
xAxis.axisLineColor = [UIColor blackColor]; // 设置 X 轴颜色
xAxis.granularityEnabled = YES; // 设置重复的值不显示
xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
xAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
xAxis.drawGridLinesEnabled = NO; // 不绘制网格线
xAxis.gridColor = [UIColor clearColor]; // 网格线颜色 // 设置 Y 轴样式
self.lineChartView.rightAxis.enabled = NO; // 不绘制右边轴
ChartYAxis *leftAxis = self.lineChartView.leftAxis; // 获取左边 Y 轴
leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
leftAxis.axisMinValue = 0; // 设置 Y 轴的最小值
leftAxis.axisMaxValue = 105; // 设置 Y 轴的最大值
leftAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 Y 轴线宽
leftAxis.axisLineColor = [UIColor blackColor]; // 设置 Y 轴颜色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label 文字位置
leftAxis.valueFormatter = [[YAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
leftAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // label 文字字体
leftAxis.labelCount = 5; // label 数量，数值不一定，
// 如果 forceLabelsEnabled 等于 YES,
// 则强制绘制制定数量的 label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; // 设置虚线样式的网格线
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // 网格线颜色
leftAxis.gridAntialiasEnabled = YES; // 网格线开启抗锯齿 // 添加限制线
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制线"]; // 设置限制值和标题
limitLine.lineWidth = 2; // 限制线的宽度
limitLine.lineColor = [UIColor greenColor]; // 限制线的颜色
limitLine.lineDashLengths = @[@5.0f, @5.0f]; // 虚线样式
limitLine.labelPosition = ChartLimitLabelPositionRightTop; // label 位置
limitLine.valueTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
limitLine.valueFont = [UIFont systemFontOfSize:12]; // label 字体
[leftAxis addLimitLine:limitLine]; // 添加到 Y 轴上
leftAxis.drawLimitLinesBehindDataEnabled = YES; // 设置限制线绘制在折线图的下面 // 设置折线图描述
self.lineChartView.chartDescription.enabled = YES; // 显示折线图描述，默认 YES 显示
self.lineChartView.descriptionText = @"折线图"; // 折线图描述
self.lineChartView.descriptionFont = [UIFont systemFontOfSize:15]; // 折线图描述字体
self.lineChartView.descriptionTextColor = [UIColor darkGrayColor]; // 折线图描述颜色 // 设置折线图图例
self.lineChartView.legend.enabled = YES; // 显示图例，默认 YES 显示
self.lineChartView.legend.form = ChartLegendFormLine; // 图例的样式
self.lineChartView.legend.formSize = 30; // 图例中线条的长度
self.lineChartView.legend.textColor = [UIColor darkGrayColor]; // 图例文字颜色 // 设置动画效果，可以设置 X 轴和 Y 轴的动画效果
[self.lineChartView animateWithXAxisDuration:1.0f];
} // 设置折线图数据
- (LineChartData *)setData{ int vals_count = 50; // 要显示多少条数据 // 设置表格数据，包含 x 值和 y 值
NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
for (int i = 0; i < vals_count; i++) { double xValue = i + 1;
double yValue = arc4random() % 100; // 设置表格数据，x 轴和 y 轴的值
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:xValue y:yValue];
[chartVals1 addObject:entry];
} // 绘制折线图
LineChartDataSet *set1 = nil;
if (self.lineChartView.data.dataSetCount > 0) { LineChartData *data = (LineChartData *)self.lineChartView.data;
set1 = (LineChartDataSet *)data.dataSets[0];
set1.values = chartVals1;
// set1.valueFormatter = [[ChartMaxDataValueFormatter alloc] initWithYDataVals:chartVals1]; // 设置数据显示的格式，只显示最大值
return data; } else { // 创建 LineChartDataSet 对象
set1 = [[LineChartDataSet alloc] initWithValues:chartVals1 label:@"lineName 1"]; // label 折线图图例名称 // 设置折线的样式
set1.lineWidth = 1.0 / [UIScreen mainScreen].scale; // 折线宽度
[set1 setColor:[self colorWithHexString:@"#007FFF"]]; // 折线颜色
set1.drawValuesEnabled = YES; // 是否在拐点处显示数据，默认 YES
set1.valueColors = @[[UIColor brownColor]]; // 折线拐点处显示数据的颜色
set1.drawSteppedEnabled = NO; // 是否开启绘制阶梯样式的折线图，默认 NO
// set1.valueFormatter = [[ChartMaxDataValueFormatter alloc] initWithYDataVals:chartVals1]; // 设置数据显示的格式，只显示最大值 // 折线拐点样式
set1.drawCirclesEnabled = YES; // 是否绘制拐点，默认 YES
set1.circleRadius = 4.0f; // 拐点半径
set1.circleColors = @[[UIColor redColor], [UIColor greenColor]]; // 拐点颜色 // 拐点中间的空心样式
set1.drawCircleHoleEnabled = YES; // 是否绘制中间的空心，默认 YES
set1.circleHoleRadius = 2.0f; // 空心的半径
set1.circleHoleColor = [UIColor blackColor]; // 空心的颜色 // 折线的颜色填充样式 // 第一种填充样式:单色填充
// set1.drawFilledEnabled = YES; // 是否填充颜色，默认 NO
// set1.fillColor = [UIColor redColor]; // 填充颜色
// set1.fillAlpha = 0.3; // 填充颜色的透明度 // 第二种填充样式:渐变填充
set1.drawFilledEnabled = YES; // 是否填充颜色，默认 NO
NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#FFFFFFFF"].CGColor,
(id)[ChartColorTemplates colorFromString:@"#FF007FFF"].CGColor];
CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f]; // 赋值填充颜色对象
CGGradientRelease(gradientRef); // 释放 gradientRef
set1.fillAlpha = 0.3f; // 透明度 // 点击选中拐点的交互样式
set1.highlightEnabled = YES; // 选中拐点，是否开启高亮效果(显示十字线)，默认 YES
set1.highlightColor = [self colorWithHexString:@"#c83c23"]; // 点击选中拐点的十字线的颜色
set1.highlightLineWidth = 1.0 / [UIScreen mainScreen].scale; // 十字线宽度
set1.highlightLineDashLengths = @[@5, @5]; // 十字线的虚线样式 // 将 LineChartDataSet 对象放入数组中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1]; // 添加第二个 LineChartDataSet 对象
LineChartDataSet *set2 = [set1 copy];
set2.label = @"lineName 2";
NSMutableArray *chartVals2 = [[NSMutableArray alloc] init];
for (int i = 0; i < vals_count; i++) { double xValue = i + 1;
double yValue = arc4random() % 100; ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:xValue y:yValue];
[chartVals2 addObject:entry];
}
set2.values = chartVals2;
[set2 setColor:[UIColor redColor]];
set2.drawFilledEnabled = YES;
set2.fillColor = [UIColor redColor];
set2.fillAlpha = 0.1;
[dataSets addObject:set2]; // 创建 LineChartData 对象, 此对象就是 lineChartView 需要最终数据对象
LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]]; // 文字字体
[data setValueTextColor:[UIColor grayColor]]; // 文字颜色 // 自定义数据显示格式
ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init]; // 统一设置数据显示的格式
[data setValueFormatter:formatter]; return data;
}
} #pragma mark - ChartViewDelegate // 点击选中折线拐点时回调
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
entry:(ChartDataEntry * _Nonnull)entry
highlight:(ChartHighlight * _Nonnull)highlight { // 设置滑动时 Y 值标签
self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y]; // 将点击的数据滑动到中间
[self.lineChartView centerViewToAnimatedWithXValue:entry.x
yValue:entry.y
axis:[self.lineChartView.data
getDataSetByIndex:highlight.dataSetIndex].axisDependency
duration:1.0];
} // 没有选中折线拐点时回调
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView { } // 放大折线图时回调
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY { } // 拖拽折线图时回调
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY { } // 懒加载滑动时 Y 值标签
- (UILabel *)markYLabel { if (!_markYLabel) {
_markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
_markYLabel.font = [UIFont systemFontOfSize:15.0];
_markYLabel.textAlignment = NSTextAlignmentCenter;
_markYLabel.text = @"";
_markYLabel.textColor = [UIColor whiteColor];
_markYLabel.backgroundColor = [UIColor grayColor];
}
return _markYLabel;
} // 由十六进制创建颜色
- (UIColor *)colorWithHexString:(NSString *)color { NSString *cString = [[color stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString]; // String should be 6 or 8 characters
if ([cString length] < 6) {
return [UIColor clearColor];
} // strip "0X" or "#" if it appears
if ([cString hasPrefix:@"0X"])
cString = [cString substringFromIndex:2];
if ([cString hasPrefix:@"#"])
cString = [cString substringFromIndex:1];
if ([cString length] != 6)
return [UIColor clearColor]; // Separate into r, g, b substrings
NSRange range;
range.location = 0;
range.length = 2; // r
NSString *rString = [cString substringWithRange:range]; // g
range.location = 2;
NSString *gString = [cString substringWithRange:range]; // b
range.location = 4;
NSString *bString = [cString substringWithRange:range]; // Scan values
unsigned int r, g, b;
[[NSScanner scannerWithString:rString] scanHexInt:&r];
[[NSScanner scannerWithString:gString] scanHexInt:&g];
[[NSScanner scannerWithString:bString] scanHexInt:&b];
return [UIColor colorWithRed:((float) r / 255.0f) green:((float) g / 255.0f) blue:((float) b / 255.0f) alpha:1.0f];
} @end-
效果
-
-
如果绘制光滑的曲线图，可以设置 set 的 mode 值为 LineChartModeCubicBezier，不设置 drawValuesEnabled 的值。
// 绘制光滑曲线
set1.mode = LineChartModeCubicBezier;
set1.cubicIntensity = 0.2; // 是否开启绘制阶梯样式的折线图，默认 NO
// set1.drawSteppedEnabled = NO;-
效果
-
4、绘制柱状图
-
XAxisValueFormatter.h
/// 设置 X 轴 数据格式 @import Charts; @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end -
XAxisValueFormatter.m
@implementation XAxisValueFormatter /// 实现协议方法，返回 x 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 x 轴的值 return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
} @end -
YAxisValueFormatter.h
/// 设置 Y 轴 数据格式 @import Charts; @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end -
YAxisValueFormatter.m
@implementation YAxisValueFormatter /// 实现协议方法，返回 y 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 y 轴的值 return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
} @end -
ChartDataValueFormatter.h
/// 设置 柱形上显示的 数据格式 @import Charts; @interface ChartDataValueFormatter : NSObject <IChartValueFormatter> @end -
ChartDataValueFormatter.m
@implementation ChartDataValueFormatter /// 实现协议方法，返回柱形上显示的数据格式
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { return [NSString stringWithFormat:@"%.1f", entry.y];
} @end -
ChartMaxDataValueFormatter.h
/// 设置 柱形上显示的 数据格式，只显示最大值 @import Charts; @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter> - (instancetype)initWithYDataVals:(NSArray *)yVals; @end -
ChartMaxDataValueFormatter.m
@interface ChartMaxDataValueFormatter () @property (nonatomic, strong) NSArray *yDataValueArray;
@property (nonatomic, assign) double maxDataSetIndex; @end @implementation ChartMaxDataValueFormatter - (instancetype)initWithYDataVals:(NSArray *)yVals {
if (self = [super init]) { self.yDataValueArray = yVals;
NSMutableArray *muArr = [NSMutableArray arrayWithArray:yVals];
[muArr sortUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
ChartDataEntry *entry1 =(ChartDataEntry *)obj1;
ChartDataEntry *entry2 =(ChartDataEntry *)obj2;
if (entry1.y >= entry2.y){
return NSOrderedAscending;
} else {
return NSOrderedDescending;
}
}];
self.maxDataSetIndex =((ChartDataEntry * )muArr[0]).x;
}
return self;
} /// 实现协议方法，只显示柱形上数据的最大值
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { if (entry.x == self.maxDataSetIndex) {
return [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
} else {
return @"";
}
} @end -
ViewController.m
#import "ChartsDemo-Bridging-Header.h" // 自定义数据格式
#import "YAxisValueFormatter.h"
#import "XAxisValueFormatter.h"
#import "ChartDataValueFormatter.h"
#import "ChartMaxDataValueFormatter.h" // 遵守协议
@interface ViewController () <ChartViewDelegate> // 柱状图
@property (nonatomic, strong) BarChartView *barChartView; // 滑动时 Y 值标签
@property (nonatomic,strong) UILabel *markYLabel; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1]; // 创建柱状图
[self createdBarView]; // 设置柱状图的数据
self.barChartView.data = [self setData];
} // 创建柱状图
- (void)createdBarView { // 初始化柱状图对象
self.barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
self.barChartView.center = self.view.center;
[self.view addSubview:self.barChartView]; // 设置基本样式
self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.barChartView.delegate = self; // 设置代理，需遵守 ChartViewDelegate 协议
self.barChartView.noDataText = @"暂无数据"; // 没有数据时的文字提示
self.barChartView.drawValueAboveBarEnabled = YES; // 数值显示在柱形的上面还是下面
self.barChartView.drawBarShadowEnabled = NO; // 是否绘制柱形的阴影背景 // 设置交互样式
self.barChartView.scaleYEnabled = NO; // 取消 Y 轴缩放
self.barChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
self.barChartView.dragEnabled = YES; // 启用拖拽图标
self.barChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
self.barChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显 // 设置滑动时 Y 值标签
ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
markerY.offset = CGPointMake(-17, -25); // 设置显示位置
markerY.chartView = self.barChartView;
[markerY addSubview:self.markYLabel];
self.barChartView.marker = markerY; // 设置 X 轴样式
ChartXAxis *xAxis = self.barChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 设置 X 轴的显示位置，默认是显示在上面的
xAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 X 轴线宽
xAxis.axisLineColor = [UIColor blackColor]; // 设置 X 轴颜色
xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
xAxis.labelTextColor = [UIColor brownColor]; // label 文字颜色
xAxis.drawGridLinesEnabled = NO; // 不绘制网格线
xAxis.gridColor = [UIColor clearColor]; // 网格线颜色 // 设置 Y 轴样式
self.barChartView.rightAxis.enabled = NO; // 不绘制右边轴
ChartYAxis *leftAxis = self.barChartView.leftAxis; // 获取左边 Y 轴
leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
leftAxis.axisMinValue = 0; // 设置 Y 轴的最小值
leftAxis.axisMaxValue = 105; // 设置 Y 轴的最大值
leftAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 Y 轴线宽
leftAxis.axisLineColor = [UIColor blackColor]; // 设置 Y 轴颜色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label 文字位置
leftAxis.valueFormatter = [[YAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
leftAxis.labelTextColor = [UIColor brownColor]; // label 文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // label 文字字体
leftAxis.labelCount = 5; // label 数量，数值不一定，
// 如果 forceLabelsEnabled 等于 YES,
// 则强制绘制制定数量的 label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; // 设置虚线样式的网格线
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // 网格线颜色
leftAxis.gridAntialiasEnabled = YES; // 网格线开启抗锯齿 // 添加限制线
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制线"]; // 设置限制值和标题
limitLine.lineWidth = 2; // 限制线的宽度
limitLine.lineColor = [UIColor greenColor]; // 限制线的颜色
limitLine.lineDashLengths = @[@5.0f, @5.0f]; // 虚线样式
limitLine.labelPosition = ChartLimitLabelPositionRightTop; // label 位置
limitLine.valueTextColor = [UIColor grayColor]; // label 文字颜色
limitLine.valueFont = [UIFont systemFontOfSize:12]; // label 字体
[leftAxis addLimitLine:limitLine]; // 添加到 Y 轴上
leftAxis.drawLimitLinesBehindDataEnabled = YES; // 设置限制线绘制在柱状图的下面 // 设置柱状图描述
self.barChartView.chartDescription.enabled = YES; // 显示柱状图描述，默认 YES 显示
self.barChartView.descriptionText = @"柱状图"; // 柱状图描述
self.barChartView.descriptionFont = [UIFont systemFontOfSize:15]; // 柱状图描述字体
self.barChartView.descriptionTextColor = [UIColor darkGrayColor]; // 柱状图描述颜色 // 设置柱状图图例
self.barChartView.legend.enabled = NO; // 显示图例，默认 YES 显示 // 设置动画效果，可以设置 X 轴和 Y 轴的动画效果
[self.barChartView animateWithYAxisDuration:1.0f];
} // 设置柱状图数据
- (BarChartData *)setData { int vals_count = 50; // 要显示多少条数据 // 设置表格数据，包含 x 值和 y 值
NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
for (int i = 0; i < vals_count; i++) { double xValue = i + 1;
double yValue = arc4random() % 100; // 设置表格数据，x 轴和 y 轴的值
BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:xValue y:yValue];
[chartVals1 addObject:entry];
} // 绘制柱状图 // 创建 BarChartDataSet 对象
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:chartVals1 label:nil]; // 设置柱形的样式
[set1 setColors:ChartColorTemplates.material]; // 设置柱形图颜色
set1.drawValuesEnabled = YES; // 是否显示数据，默认 YES
set1.valueColors = @[[UIColor brownColor]]; // 显示数据的颜色
set1.highlightEnabled = YES; // 点击选中柱形图是否有高亮效果，（双击空白处取消选中）
// set1.valueFormatter = [[ChartMaxDataValueFormatter alloc] initWithYDataVals:chartVals1]; // 设置数据显示的格式，只显示最大值 // 将 BarChartDataSet 对象放入数组中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1]; // 创建 BarChartData 对象, 此对象就是 BarChartData 需要最终数据对象
BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]]; // 文字字体
[data setValueTextColor:[UIColor grayColor]]; // 文字颜色 // 自定义数据显示格式
ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init];// 统一设置数据显示的格式
[data setValueFormatter:formatter]; return data;
} #pragma mark - ChartViewDelegate // 点击选中柱形图时的代理方法
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
entry:(ChartDataEntry * _Nonnull)entry
highlight:(ChartHighlight * _Nonnull)highlight { // 设置滑动时 Y 值标签
self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y]; // 将点击的数据滑动到中间
[self.barChartView centerViewToAnimatedWithXValue:entry.x
yValue:entry.y
axis:[self.barChartView.data
getDataSetByIndex:highlight.dataSetIndex].axisDependency
duration:1.0];
} // 没有选中柱形图时的代理方法，当选中一个柱形图后，在空白处双击，就可以取消选择，此时会回调此方法
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView { } // 捏合放大或缩小柱形图时的代理方法
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY { } // 拖拽图表时的代理方法
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY { } // 懒加载滑动时 Y 值标签
- (UILabel *)markYLabel { if (!_markYLabel) {
_markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
_markYLabel.font = [UIFont systemFontOfSize:15.0];
_markYLabel.textAlignment = NSTextAlignmentCenter;
_markYLabel.text = @"";
_markYLabel.textColor = [UIColor whiteColor];
_markYLabel.backgroundColor = [UIColor grayColor];
}
return _markYLabel;
} @end-
效果
-
-
如果要显示水平柱状图，只需要把 BarChartView 换成 HorizontalBarChartView 即可。
// 声明柱状图
@property (nonatomic, strong) HorizontalBarChartView *barChartView; // 初始化柱状图对象
self.barChartView = [[HorizontalBarChartView alloc] initWithFrame:frame];-
效果
-
5、绘制饼图
-
ChartDataValueFormatter.h
/// 设置 折线显示的 数据格式 @import Charts; @interface ChartDataValueFormatter : NSObject <IChartValueFormatter> @end -
ChartDataValueFormatter.m
@implementation ChartDataValueFormatter /// 实现协议方法，返回折线拐点上显示的数据格式
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { return [NSString stringWithFormat:@"%.0f%%", entry.y];
} @end -
ViewController.m
#import "ChartsDemo-Bridging-Header.h" // 自定义数据格式
#import "ChartDataValueFormatter.h" // 遵守协议
@interface ViewController () <ChartViewDelegate> // 饼状图
@property (nonatomic, strong) PieChartView *pieChartView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1]; // 创建饼状图
[self createdPieView]; // 设置饼状图的数据
self.pieChartView.data = [self setData];
} // 创建饼状图
- (void)createdPieView { // 初始化饼状图对象
self.pieChartView = [[PieChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
self.pieChartView.center = self.view.center;
[self.view addSubview:self.pieChartView]; // 设置基本样式
self.pieChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.pieChartView.delegate = self; // 设置代理，需遵守 ChartViewDelegate 协议
self.pieChartView.noDataText = @"暂无数据"; // 没有数据时的文字提示
[self.pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0]; // 饼状图距离边缘的间隙
self.pieChartView.usePercentValuesEnabled = YES; // 是否根据所提供的数据, 将显示数据转换为百分比格式
self.pieChartView.drawSliceTextEnabled = YES; // 是否显示区块文本 // 设置交互样式
self.pieChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
self.pieChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显 // 设置饼状图中间的空心样式
// 空心有两个圆组成, 一个是 hole, 一个是 transparentCircle, transparentCircle 里面是 hole
self.pieChartView.drawHoleEnabled = YES; // 饼状图是否是空心
self.pieChartView.holeColor = [UIColor clearColor]; // 空心颜色
self.pieChartView.holeRadiusPercent = 0.5; // 空心半径占比
self.pieChartView.transparentCircleRadiusPercent = 0.52; // 半透明空心半径占比
self.pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];
// 半透明空心的颜色
// 设置饼状图中心的文本
if (self.pieChartView.isDrawHoleEnabled == YES) { self.pieChartView.drawCenterTextEnabled = YES; // 是否显示中间文字 // 普通文本
// self.pieChartView.centerText = @"饼状图"; // 中间文字 // 富文本
NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"];
[centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],
NSForegroundColorAttributeName: [UIColor orangeColor]}
range:NSMakeRange(0, centerText.length)];
self.pieChartView.centerAttributedText = centerText;
} // 设置饼状图描述
self.pieChartView.chartDescription.enabled = YES; // 显示饼状图描述，默认 YES 显示
self.pieChartView.descriptionText = @"饼状图";
self.pieChartView.descriptionFont = [UIFont systemFontOfSize:15];
self.pieChartView.descriptionTextColor = [UIColor grayColor]; // 设置饼状图图例
self.pieChartView.legend.enabled = YES; // 显示图例，默认 YES 显示
self.pieChartView.legend.form = ChartLegendFormCircle; // 图示样式: 方形、线条、圆形
self.pieChartView.legend.formSize = 12; // 图示大小
self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter; // 图例在饼状图中的位置
self.pieChartView.legend.maxSizePercent = 1; // 图例在饼状图中的大小占比, 这会影响图例的宽高
self.pieChartView.legend.formToTextSpace = 5; // 文本间隔
self.pieChartView.legend.font = [UIFont systemFontOfSize:10]; // 字体大小
self.pieChartView.legend.textColor = [UIColor grayColor]; // 字体颜色 // 设置动画效果，可以设置 X 轴和 Y 轴的动画效果
[self.pieChartView animateWithYAxisDuration:1.0f];
} // 设置饼状图数据
- (PieChartData *)setData { int vals_count = 5; // 饼状图总共有几块组成 // 每个区块的数据，包含 区块名称 和 区块数据
NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
for (int i = 0; i < vals_count; i++) { NSString *partLabel = [NSString stringWithFormat:@"part%d", i]; // 设置区块名称
double partValue = arc4random() % 100; // 设置区块值 PieChartDataEntry *entry = [[PieChartDataEntry alloc] initWithValue:partValue label:partLabel];
[chartVals1 addObject:entry];
} // 绘制饼状图 // 创建 PieChartDataSet 对象
PieChartDataSet *set1 = [[PieChartDataSet alloc] initWithValues:chartVals1 label:nil]; // 设置区块
NSMutableArray *colors = [[NSMutableArray alloc] init];
[colors addObjectsFromArray:ChartColorTemplates.vordiplom];
[colors addObjectsFromArray:ChartColorTemplates.joyful];
[colors addObjectsFromArray:ChartColorTemplates.colorful];
[colors addObjectsFromArray:ChartColorTemplates.liberty];
[colors addObjectsFromArray:ChartColorTemplates.pastel];
[colors addObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];
set1.colors = colors; // 设置区块颜色
set1.sliceSpace = 0; // 相邻区块之间的间距
set1.selectionShift = 8; // 选中区块时, 放大的半径 // 设置区块名称
set1.xValuePosition = PieChartValuePositionInsideSlice; // 区块名称位置
set1.entryLabelColor = [UIColor redColor]; // 区块名称颜色
set1.entryLabelFont = [UIFont systemFontOfSize:15]; // 区块名称字体 // 设置区块数据
set1.drawValuesEnabled = YES; // 是否绘制显示数据
set1.yValuePosition = PieChartValuePositionOutsideSlice; // 区块数据位置 // 数据与区块之间的用于指示的折线样式
set1.valueLinePart1OffsetPercentage = 0.85; // 折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
set1.valueLinePart1Length = 0.5; // 折线中第一段长度占比
set1.valueLinePart2Length = 0.4; // 折线中第二段长度最大占比
set1.valueLineWidth = 1; // 折线的粗细
set1.valueLineColor = [UIColor brownColor]; // 折线颜色 // 将 PieChartDataSet 对象放入数组中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1]; // 创建 PieChartData 对象, 此对象就是 PieChartData 需要最终数据对象
PieChartData *data = [[PieChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont systemFontOfSize:10]];
[data setValueTextColor:[UIColor brownColor]]; // 自定义数据显示格式
ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init];// 统一设置数据显示的格式
[data setValueFormatter:formatter]; return data;
} #pragma mark - ChartViewDelegate // 点击选中柱形图时的代理方法
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
entry:(ChartDataEntry * _Nonnull)entry
highlight:(ChartHighlight * _Nonnull)highlight { } // 没有选中柱形图时的代理方法，当选中一个柱形图后，在空白处双击，就可以取消选择，此时会回调此方法
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView { } // 捏合放大或缩小柱形图时的代理方法
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY { } // 拖拽图表时的代理方法
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY { } @end-
效果
-
-
如果不需要空心样式的饼状图, 可以将饼状图的 drawHoleEnabled 赋值为 NO, 将中间的文本去掉即可。
// 饼状图是否是空心
self.pieChartView.drawHoleEnabled = NO;-
效果
-
-
每个区块之间如果需要间距, 可以通过 dataSet 对象的 sliceSpace 属性设置,
// 相邻区块之间的间距
set1.sliceSpace = 4;-
效果
-
6、绘制雷达图
-
XAxisValueFormatter.h
/// 设置 X 轴 数据格式 @import Charts; @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter> @end -
XAxisValueFormatter.m
@implementation XAxisValueFormatter /// 实现协议方法，返回 x 轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { // value 为 x 轴的值 return [NSString stringWithFormat:@"%ld 月", (NSInteger)value + 1];
} @end -
ChartDataValueFormatter.h
/// 设置 折线显示的 数据格式 @import Charts; @interface ChartDataValueFormatter : NSObject <IChartValueFormatter> @end -
ChartDataValueFormatter.m
@implementation ChartDataValueFormatter /// 实现协议方法，返回辐射线拐点上显示的数据格式
- (NSString * _Nonnull)stringForValue:(double)value
entry:(ChartDataEntry * _Nonnull)entry
dataSetIndex:(NSInteger)dataSetIndex
viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler { return [NSString stringWithFormat:@"%.0f%%", entry.y];
} @end -
ViewController.m
#import "ChartsDemo-Bridging-Header.h" // 自定义数据格式
#import "XAxisValueFormatter.h"
#import "ChartDataValueFormatter.h" // 遵守协议
@interface ViewController () <ChartViewDelegate> // 雷达图
@property (nonatomic, strong) RadarChartView *radarChartView; // 滑动时 Y 值标签
@property (nonatomic,strong) UILabel *markYLabel; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1]; // 创建雷达图
[self createdPieView]; // 设置雷达图的数据
self.radarChartView.data = [self setData];
} // 创建雷达图
- (void)createdPieView { // 初始化雷达图对象
self.radarChartView = [[RadarChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 20, 400)];
self.radarChartView.center = self.view.center;
[self.view addSubview:self.radarChartView]; // 设置基本样式
self.radarChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.radarChartView.delegate = self; // 设置代理，需遵守 ChartViewDelegate 协议
self.radarChartView.noDataText = @"暂无数据"; // 没有数据时的文字提示 // 设置交互样式
self.radarChartView.rotationEnabled = YES; // 是否允许转动
self.radarChartView.highlightPerTapEnabled = YES; // 是否能被选中 // 设置雷达图线条样式
self.radarChartView.webLineWidth = 1.0; // 主干线线宽，辐射线
self.radarChartView.webColor = [UIColor lightGrayColor]; // 主干线颜色
self.radarChartView.innerWebLineWidth = 1.0; // 边线宽度，圆形线
self.radarChartView.innerWebColor = [UIColor lightGrayColor]; // 边线颜色
self.radarChartView.webAlpha = 0.5; // 雷达图线的透明度 // 设置滑动时 Y 值标签
ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
markerY.offset = CGPointMake(-17, -25); // 设置显示位置
markerY.chartView = self.radarChartView;
[markerY addSubview:self.markYLabel];
self.radarChartView.marker = markerY; // 设置 X 轴 label 样式，由中心向外延伸的线
ChartXAxis *xAxis = self.radarChartView.xAxis;
xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式，自定义格式，默认时不显示特殊符号
xAxis.labelFont = [UIFont systemFontOfSize:15]; // 字体
xAxis.labelTextColor = [UIColor colorWithRed:5/255.0f green:119/255.0f blue:72/255.0f alpha:1]; // 颜色 // 设置 Y 轴 label 样式，圆形的线
ChartYAxis *yAxis = self.radarChartView.yAxis;
yAxis.axisMinValue = 0.0; // 最小值，中心的值
yAxis.axisMaxValue = 100.0; // 最大值，最外边的值
yAxis.drawLabelsEnabled = YES; // 是否显示 label 值
yAxis.labelCount = 5; // label 个数
yAxis.labelFont = [UIFont systemFontOfSize:9]; // label 字体
yAxis.labelTextColor = [UIColor lightGrayColor]; // label 颜色 // 设置雷达图描述
self.radarChartView.chartDescription.enabled = YES; // 显示雷达图描述，默认 YES 显示
self.radarChartView.descriptionText = @"雷达图";
self.radarChartView.descriptionFont = [UIFont systemFontOfSize:15];
self.radarChartView.descriptionTextColor = [UIColor grayColor]; // 设置雷达图图例
self.radarChartView.legend.enabled = YES; // 显示图例，默认 YES 显示
self.radarChartView.legend.form = ChartLegendFormCircle; // 图示样式: 方形、线条、圆形
self.radarChartView.legend.formSize = 12; // 图示大小
self.radarChartView.legend.position = ChartLegendPositionBelowChartCenter; // 图例在雷达图中的位置
self.radarChartView.legend.maxSizePercent = 1; // 图例在雷达图中的大小占比, 这会影响图例的宽高
self.radarChartView.legend.formToTextSpace = 5; // 文本间隔
self.radarChartView.legend.font = [UIFont systemFontOfSize:10]; // 字体大小
self.radarChartView.legend.textColor = [UIColor grayColor]; // 字体颜色 // 设置动画效果，可以设置 X 轴和 Y 轴的动画效果
[self.radarChartView animateWithXAxisDuration:1.4 yAxisDuration:1.4 easingOption:ChartEasingOptionEaseOutBack];
} // 设置雷达图数据
- (RadarChartData *)setData { int vals_count = 12; // 维度的个数 // 每个维度的名称或描述
NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
for (int i = 0; i < vals_count; i++) { double partValue = arc4random() % 70 + 30; // 设置区块值 RadarChartDataEntry *entry = [[RadarChartDataEntry alloc] initWithValue:partValue];
[chartVals1 addObject:entry];
} // 绘制雷达图 // 创建 RadarChartDataSet 对象
RadarChartDataSet *set1 = [[RadarChartDataSet alloc] initWithValues:chartVals1 label:@"RadarName 1"]; // 设置数据块
set1.lineWidth = 0.5; // 数据折线线宽
[set1 setColor:[UIColor redColor]]; // 数据折线颜色
set1.drawFilledEnabled = YES; // 是否填充颜色
set1.fillColor = [UIColor orangeColor]; // 填充颜色
set1.fillAlpha = 0.5; // 填充透明度 // 设置数据块折点样式
set1.drawHighlightCircleEnabled = NO; // 是否绘制选中的拐点处的圆形
set1.highlightCircleStrokeColor = [UIColor greenColor]; // 拐点处的圆形颜色
[set1 setDrawHighlightIndicators:NO]; // 是否绘制选中拐点处的十字线 // 设置显示数据
set1.drawValuesEnabled = YES; // 是否绘制显示数据
set1.valueFont = [UIFont systemFontOfSize:9]; // 字体
set1.valueTextColor = [UIColor grayColor]; // 颜色 // 创建 RadarChartData 对象, 此对象就是 PieChartData 需要最终数据对象
RadarChartData *data = [[RadarChartData alloc] initWithDataSets:@[set1]];
[data setValueFont:[UIFont systemFontOfSize:15]];
[data setValueTextColor:[UIColor brownColor]]; // 自定义数据显示格式
ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init];// 统一设置数据显示的格式
[data setValueFormatter:formatter]; return data;
} #pragma mark - ChartViewDelegate // 点击选中柱形图时的代理方法
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
entry:(ChartDataEntry * _Nonnull)entry
highlight:(ChartHighlight * _Nonnull)highlight { // 设置滑动时 Y 值标签
self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
} // 没有选中柱形图时的代理方法，当选中一个柱形图后，在空白处双击，就可以取消选择，此时会回调此方法
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView { } // 捏合放大或缩小柱形图时的代理方法
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY { } // 拖拽图表时的代理方法
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY { } // 懒加载滑动时 Y 值标签
- (UILabel *)markYLabel { if (!_markYLabel) {
_markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
_markYLabel.font = [UIFont systemFontOfSize:15.0];
_markYLabel.textAlignment = NSTextAlignmentCenter;
_markYLabel.text = @"";
_markYLabel.textColor = [UIColor whiteColor];
_markYLabel.backgroundColor = [UIColor grayColor];
}
return _markYLabel;
} @end-
效果
-