Charts可以绘制柱状图、折线图、K线图、饼状图等Charts，且和Android一致的图表界面MPAndroidChart。 Charts是一套非常漂亮的开源图表组件，它是MPAndroidChart在苹果端的移植版本，同时支持iOS/tvOS/OSX平台。 Charts是用 Swift语言编写的，能够同时在 Swift 和 Objc 工程中使用。
核心功能：
支持8种不同的图表类型
1、支持两轴缩放（支持触摸手势,两轴单独或同时的放缩）
2、支持使用触摸手势进行 拖拽/平移。
3、组合图表（线状，柱状，散点图，蜡烛图，气泡图等）
4、多个（或单独）的轴
5、可自定义坐标轴 （包括x 轴和 y 轴）
6、高亮显示值（支持自定义popup-view来显示选中的值）
7、可保存图表到 Camera-roll, 支持导出为 PNG 和 JPEG格式
8、预定义的颜色模板
9、图例（可自动生成，或者自定义）
9、动画（支持在x和y轴上建立动画）
10、限制线（用来提供附加信息，最大值...）
11、完全自定义（paints，字体，图例，颜色，背景，手势，虚线）
图表类型示例:
LineChart -（线状图、渐变填充）
Combined-Chart - 组合图表（下图为线状图和柱状图）
BarChart - (柱状图、多个数据集）
Horizontal-BarChart(水平方向的柱状图)
PieChart - (饼图)
ScatterChart - 散点图（带正方形，三角形，圆形,等等）
CandleStickChart - 蜡烛图（用于财务数据）
BubbleChart - 气泡图（气泡覆盖的区域表示该值）
RadarChart - 雷达图（蜘蛛网图）
一、Charts库Objc引用(默认cocoapods导入)
1.1、配置好Swift桥接文件。
创建桥接文件.png
引入Charts.png
1.2、我是全局引用这个桥接文件的
#import "KLineProject-Bridging-Header.h" //在pch文件全局引入吧，方便
二、使用
2.0、折线/曲线图的绘制示例-LineChart- (线状图、渐变填充）
#import "LineChartsController.h"
@interface LineChartsController ()<ChartViewDelegate,IChartAxisValueFormatter>
@property (nonatomic ,strong)LineChartView *chartView;
@property (nonatomic ,strong)NSArray *xTitle;
@end
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationItem.title = @"折线图1";
self.view.backgroundColor = [UIColor whiteColor];
[self.view addSubview:self.chartView];
[self setData:@[@59,@77,@23,@38,@90,@20]];
[self setData:@[@33,@12,@80,@44]];
}
- (LineChartView *)chartView{
if (_chartView == nil) {
_chartView = [[LineChartView alloc]init];
_chartView.frame = CGRectMake(0, 80, self.view.frame.size.width-10, 300);
_chartView.noDataText = @"暂无数据";
_chartView.scaleYEnabled = NO;//设置交互方式
_chartView.dragDecelerationEnabled = YES;//启动拖拽图标
_chartView.dragDecelerationFrictionCoef = 0.9;//拖拽后是否有惯性效果(0~1)，数值越小，惯性越不明显
ChartXAxis *xAxis = _chartView.xAxis; // 设置 X 轴样式
xAxis.labelPosition = XAxisLabelPositionBottom;// 设置 X 轴的显示位置，默认是显示在上面的
xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;// 设置 X 轴线宽
xAxis.axisLineColor = [UIColor blackColor];
xAxis.granularityEnabled = YES;// 设置重复的值不显示
xAxis.valueFormatter = self; // label 文字样式，自定义格式，默认时不显示特殊符号
xAxis.labelTextColor = [UIColor blackColor];// label 文字颜色
xAxis.drawGridLinesEnabled = NO;// // 不绘制网格线
xAxis.axisMinimum = -0.4;
_chartView.rightAxis.enabled = NO;// 设置 Y 轴样式不绘制右边轴
ChartYAxis *leftAxis = _chartView.leftAxis;// 获取左边 Y 轴
leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;// 设置 Y 轴线宽
leftAxis.axisLineColor = [UIColor orangeColor];// 设置 Y 轴颜色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;// label 文字位置 YAxisLabelPositionInsideChart:在里面，YAxisLabelPositionOutsideChart:在外面
leftAxis.labelTextColor = [UIColor blackColor]; // label 文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // 不强制绘制指定数量的 label
leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
leftAxis.gridLineDashLengths = @[@3.0f,@3.0f];// 设置虚线样式的网格线 网格线的大小
leftAxis.gridColor = [UIColor redColor]; // 网格线颜色
leftAxis.gridAntialiasEnabled = YES;// 网格线开启抗锯齿
_chartView.chartDescription.enabled = NO;// 设置折线图描述
_chartView.legend.enabled = NO; // 设置折线图图例
[_chartView animateWithXAxisDuration:1.0f];// 设置动画效果，可以设置 X 轴和 Y 轴的动画效果
}
return _chartView;
}
#pragma mark -
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis{
// return self.xTitle[(NSInteger)value];
return [NSString stringWithFormat:@"11"];//x轴数据
}
- (void)setData:(NSArray *)dataArr{
ChartXAxis *xAxis = _chartView.xAxis;
xAxis.axisMinimum = self.xTitle.count-0.5;
NSMutableArray *valueArray = [NSMutableArray array];
[valueArray addObject:dataArr];
NSMutableArray *dataSets = [NSMutableArray array];
double leftAxisMin = 0;
double leftAxisMax = 0;
for (int i = 0; i<valueArray.count; i++) {
NSArray *values = valueArray[i];
NSMutableArray *yVals = [NSMutableArray array];
for (int j = 0; j<values.count; j++) {
NSString *valStr = [NSString stringWithFormat:@"%@",values[j]];
double val = [valStr doubleValue];
leftAxisMax = MAX(val, leftAxisMax);
leftAxisMin = MIN(val, leftAxisMax);
ChartDataEntry *entry = [[ChartDataEntry alloc]initWithX:j y:val];
[yVals addObject:entry];
}
[_chartView setVisibleXRangeWithMinXRange:1 maxXRange:4];
LineChartDataSet * dataSet = [[LineChartDataSet alloc]initWithEntries:yVals];
dataSet.lineWidth = 2.0f;//折线宽度
dataSet.drawValuesEnabled = YES;//是否在拐点处显示数据
dataSet.valueColors = @[[UIColor orangeColor],[UIColor redColor]];//折线拐点处显示数据的颜色
dataSet.drawCirclesEnabled = NO;//是否开启绘制阶梯样式的折线图
dataSet.cubicIntensity = 0.2;// 曲线弧度
dataSet.circleRadius = 3.0f;//拐点半径
dataSet.mode = LineChartModeCubicBezier;// 模式为曲线模式
dataSet.axisDependency = AxisDependencyLeft;
dataSet.circleHoleRadius = 2.0f;//空心的半径
dataSet.circleColors = @[[UIColor blueColor]];//空心的圈的颜色
dataSet.circleHoleColor = [UIColor grayColor];//空心的颜色
dataSet.highlightEnabled = YES;//选中拐点,是否开启高亮效果(显示十字线)
dataSet.highlightColor = [UIColor clearColor];
dataSet.valueFont = [UIFont systemFontOfSize:12];
dataSet.drawFilledEnabled = YES;//是否填充颜色
// 设置渐变效果
[dataSet setColor:[UIColor colorWithRed:0.114 green:0.812 blue:1.0 alpha:1.0]];//折线颜色
NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#FFFFFFFF"].CGColor,(id)[ChartColorTemplates colorFromString:@"#C4F3FF"].CGColor];
CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
dataSet.fillAlpha = 1.0f;//透明度
dataSet.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f];//赋值填充颜色对象
CGGradientRelease(gradientRef);//释放gradientRef
// 把线放到LineChartData里面,因为只有一条线，所以集合里面放一个就好了，多条线就需要不同的 set 啦
[dataSets addObject:dataSet];
}
double leftDiff = leftAxisMax - leftAxisMin;
if (leftAxisMax == 0 && leftAxisMin == 0) {
leftAxisMax = 100.0;
leftAxisMin = 0;
} else {
leftAxisMax = (leftAxisMax + leftDiff * 0.2);
leftAxisMin = (leftAxisMin - leftDiff * 0.1);
}
NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init];
numberFormatter.numberStyle = NSNumberFormatterDecimalStyle;
numberFormatter.multiplier = @0.001;
numberFormatter.positiveSuffix = @"K";
self.chartView.leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc]initWithFormatter:numberFormatter];
self.chartView.leftAxis.axisMinimum = 0;//设置Y轴的最小值
self.chartView.leftAxis.axisMaximum = leftAxisMax;//设置Y轴的最大值
LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
self.chartView.data = data;
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterDecimalStyle;
pFormatter.maximumFractionDigits = 2; // 小数位数(销量小数位0)
[data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter]];
[self.chartView animateWithYAxisDuration:0.3f];
}
效果如下图
折线图的绘制.png
2.1、 饼状图的绘制示例-PieChart - (饼图)
#import "PieChartsController.h"
@interface PieChartsController ()
@property (nonatomic ,strong)PieChartView *pieChartView;
@end
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor =[UIColor whiteColor];
_pieChartView = [[PieChartView alloc] initWithFrame:CGRectZero];
_pieChartView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:self.pieChartView];
self.pieChartView.frame = CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height -64);
//-------------------- 饼状图的配置----------------------
// 动画
[self.pieChartView animateWithXAxisDuration:1];
[self.pieChartView animateWithYAxisDuration:1];
// 饼状图距离边缘的间隙
[_pieChartView setExtraOffsetsWithLeft:35 top:10 right:35 bottom:10];
// 是否根据所提供的数据, 将显示数据转换为百分比格式
_pieChartView.usePercentValuesEnabled = NO;
// 拖拽饼状图后是否有惯性效果
_pieChartView.dragDecelerationEnabled = YES;
// 是否显示区块文本
_pieChartView.drawCenterTextEnabled = NO;
// 饼状图是否是空心
_pieChartView.drawHoleEnabled = YES;
// 空心半径占比
_pieChartView.holeRadiusPercent = 0.5;
// 空心颜色
_pieChartView.holeColor = [UIColor clearColor];
// 半透明空心半径占比
_pieChartView.transparentCircleRadiusPercent = 0.52;
// 半透明空心的颜色
_pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];
// 设置空心文字
if (_pieChartView.isDrawHoleEnabled == YES) {
// 是否显示中间文字
_pieChartView.drawCenterTextEnabled = YES;
// 普通文本
// 中间文字
_pieChartView.centerText = @"大饼";
// 富文本
NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"];
[centerText setAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor orangeColor]} range:NSMakeRange(0, centerText.length)];
_pieChartView.centerAttributedText = centerText;
}
// 设置饼状图描述
// 是否开启描述label
_pieChartView.chartDescription.enabled = NO;
// -------------------------legend图例的属性配置-------------------------------
// 是否开启图例
_pieChartView.legend.enabled = NO;
// 图例在饼状图中的大小占比, 这会影响图例的宽高
_pieChartView.legend.maxSizePercent = 1;
// 文本间隔
_pieChartView.legend.formToTextSpace = 5;
// 图例间隔大小
_pieChartView.legend.yEntrySpace = 5;//10;
// 字体大小
_pieChartView.legend.font = [UIFont systemFontOfSize:20];
// 字体颜色
_pieChartView.legend.textColor = [UIColor grayColor];
// 图例在饼状图中的位置
// 图示样式: 方形、线条、圆形
_pieChartView.legend.form = ChartLegendFormSquare;
// 图示大小
_pieChartView.legend.formSize =10;
// ------------------------饼状图的数据配置----------------------
// 每个区块的金额数
NSMutableArray* moneyArray =[NSMutableArray arrayWithArray:@[@10,@20,@30,@40,@50]];
// 每个区块的颜色
NSMutableArray *colors = [[NSMutableArray alloc] init];
[colors addObject:[UIColor colorWithRed:141/255.f green:116/255.f blue:244/255.f alpha:1]];
[colors addObject:[UIColor colorWithRed:245/255.f green:101/255.f blue:103/255.f alpha:1]];
[colors addObject:[UIColor orangeColor]];
[colors addObject:[UIColor greenColor]];
[colors addObject:[UIColor redColor]];
// 每个区块的数据
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for(int i =0; i < moneyArray.count; i++) {
double randomVal = [moneyArray[i] doubleValue];
BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:randomVal];
[yVals addObject:entry];
}
// PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:yVals label:@""];
PieChartDataSet * dataSet =[[PieChartDataSet alloc]initWithEntries:yVals label:@""];
// 是否绘制显示数据
dataSet.drawValuesEnabled = YES;
// 区块颜色
dataSet.colors= colors;
// 相邻区块之间的间距
dataSet.sliceSpace=0;
// 选中区块时, 放大的半径
dataSet.selectionShift=12;
// 名称位置
dataSet.xValuePosition = PieChartValuePositionInsideSlice;
// 数据位置
// 数据与区块之间的用于指示的折线样式
dataSet.yValuePosition = PieChartValuePositionOutsideSlice;
// 折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
dataSet.valueLinePart1OffsetPercentage = 0.85;
// 折线中第一段长度占比
dataSet.valueLinePart1Length = 0.4;
// 折线中第二段长度最大占比
dataSet.valueLinePart2Length = 0.6;
// 折线的粗细
dataSet.valueLineWidth=1.0;
// 折线颜色
dataSet.valueLineColor= [UIColor redColor];
dataSet.valueLineVariableLength = YES;
dataSet.valueTextColor= [UIColor blackColor];
NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
formatter.numberStyle = NSNumberFormatterPercentStyle;//NSNumberFormatterPercentStyle;
[formatter setPositiveFormat:@"###,##0.00;"];
// 小数位数
formatter.maximumFractionDigits = 2;
formatter.multiplier=@1.f;
formatter.paddingPosition = NSNumberFormatterPadBeforeSuffix;
// 数据设置上去
PieChartData *data = [[PieChartData alloc] initWithDataSet:dataSet];
_pieChartView.data = data;
}
饼状图预览
饼状图预览.png
其他的图形类似，就不重复了，代码已上传git,可以去下载。本文代码git地址
