iOS - Quartz 2D 第三方框架 Charts 绘制图表
2024-03-16 11:28:04
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
效果
最新文章
- Material Design学习笔记
- Linux下swoole的安装配置
- 苹果IOS系统SVN命令 同样适用于linux系统
- 图论 公约数 找环和链 BZOJ [NOI2008 假面舞会]
- C++ - 扩展欧几里德算法非递归实现
- Testing and Checking Refined
- Firefly安装说明 与 常见问题
- [POJ] 2456 Aggressive cows (二分查找)
- HDU4869:Turn the pokers(费马小定理+高速幂)
- Unity3D环境GLSL shaders书面 — 固体参数
- [HDU1000] A + B Problem
- wireshark抓包分析tcp连接与断开
- HTML5商城开发五 实现返回页面顶部
- “Error:(1, 1) java: 非法字符: '\ufeff'”错误解决办法
- Google-Guice入门介绍
- 使用Task代替ThreadPool和Thread
- python3存入redis是bytes
- 忽略“Signal: SIGSEGV (Segmentation fault)”
- MySQL 忘记密码怎么办？
- Django之Form