iOS开发 饼状图（在OC中使用Charts）
2019-07-30 本文已影响0人
舒克5251
1、下载Charts
Charts下载地址：https://github.com/ShuKeHong/iOS-Charts
这是2019年7月开发时找到的一个版本。
也可以下载最新版本，但实现方法可能有不一样的地方，注意修改。
1 下载后解压
2、OC工程中导入Charts
2.1 复制红框内所有文件
2.1 复制红框内所有文件
2.2 放到项目文件中
这里我新建了一个文件夹 里面放Charts相关文件
也可以不新建 直接放
2.2 放到项目文件中
2.3 将 Charts.xcodeproj 导入到工程中
只导入Charts.xcodeproj就可以
2.3 将Charts.xcodeproj导入到工程中
2.4 添加 Charts.framework
在 General 的 Embedded Binaries 中 Add【Charts.framework】
2.4.1 添加Charts.framework
2.4.2 添加后
3、OC工程中创建桥头文件
在工程中新建swift文件，选择自动创建桥头文件。
如果没有弹出图3.3，需要手动创建，详见5。
3.1 新建swift文件
3.2 给swift文件命名
3.3 自动创建桥头文件
3.4 创建后的swift文件和桥头文件
4、设置编译选项
4.1 设置 Always Embed Swift Standard Libraries 为 Yes
在 Build Settings 中 搜索 【 emb 】，找到图4.1中选项，并确认设置为 Yes
4.1 设置 Always Embed Swift Standard Libraries 为 Yes
4.2 检查 Product Name 和 Product Module Name
在 Build Settings 中 搜索 【 pack 】，找到图4.2中选项。
1、检查 Product Name，默认是和工程名字一样。
2、检查 Product Module Name，和 Product Name 一致。
这里只是留做记录，如果 Product Name 和工程名字不一样，导入swift头时，换成 Product Name.swift（以这个Demo为例，就是ShuKeTestCharts.swift）
4.2 检查 Product Name 和 Product Module Name
5、OC工程中手动创建桥头文件（如果是自动创建的，忽略这个过程）
5.1 手动创建桥头文件
命名为 工程名字-Bridging-Header.h（以这个Demo为例，就是ShuKeTestCharts-Bridging-Header.h）
5.1.1 手动创建桥头文件
5.1.2 文件命名
5.2 配置 Objective-C Bridging Header
在 Build Settings 中 搜索 【 swift 】，找到图5.2中选项。
配置的路径就不多说了，对应的桥头文件的路径。
5.2 配置Objective-C Bridging Header
5.3 设置 Defines Module 为 Yes
在 Build Settings 中 搜索 【 pack 】，找到图5.3中选项。
5.3 设置 Defines Module 为Yes
6、桥头文件中导入 Charts
@import Charts;
6 桥头文件中导入Charts
7、在文件中引入相关头文件
这里我新建了View，所以在这个文件中引入相关头文件
#import "ShuKeTestCharts-Bridging-Header.h" // 这个可以联想出来
#import "ShuKeTestCharts-Swift.h" // 这个需要自己手动打出来（如果有问题，可以参考4.2和5.3，或者clean后再试试）
image.png
8、具体Charts饼状图实现代码
ShuKeChartsView.h
//
// ShuKeChartsView.h
// ShuKeTestCharts
//
// Created by ShuKe on 2019/7/30.
// Copyright © 2019 Da魔王_舒克. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "ShuKeTestCharts-Bridging-Header.h"
#import "ShuKeTestCharts-Swift.h"
NS_ASSUME_NONNULL_BEGIN
@interface ShuKeChartsView : UIView
@property (nonatomic, strong) PieChartView *pieChartView;
/*
* 更新数据
* parameter
* datas : 每个扇形区域的数额
* titles : 每个扇形区域的名称
* setColors : 每个扇形区域的颜色
* setValueColors : 每个扇形区域的字颜色
*/
- (void)updateDataWithDatas:(NSArray *)datas
WithTitles:(NSArray *)titles
WithSetColors:(NSArray *)setColors
WithSetValueColors:(NSArray *)setValueColors;
@end
NS_ASSUME_NONNULL_END
ShuKeChartsView.m
//
// ShuKeChartsView.m
// ShuKeTestCharts
//
// Created by ShuKe on 2019/7/30.
// Copyright © 2019 Da魔王_舒克. All rights reserved.
//
#import "ShuKeChartsView.h"
// 获取屏幕宽度
#define ScreenWidth [UIScreen mainScreen].bounds.size.width
@implementation ShuKeChartsView
- (instancetype)init
{
self = [super init];
if (self) {
[self createView];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self createView];
}
return self;
}
- (void)createView
{
self.backgroundColor = [UIColor whiteColor];
[self addSubview:self.pieChartView];
}
- (PieChartView *)pieChartView
{
if (!_pieChartView) {
_pieChartView = [[PieChartView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth-20, 300)];
_pieChartView.backgroundColor = [UIColor whiteColor];
[_pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0]; // 饼状图距离边缘的间隙
_pieChartView.usePercentValuesEnabled = YES; // 是否根据所提供的数据, 将显示数据转换为百分比格式
_pieChartView.dragDecelerationEnabled = YES; // 拖拽饼状图后是否有惯性效果
_pieChartView.drawEntryLabelsEnabled = YES; // 是否显示区块文本
_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 = NO; // 是否显示中间文字
// 普通文本
// _pieChartView.centerText = @""; // 中间文字
// 富文本
// NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"];
// [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],
// NSForegroundColorAttributeName: [UIColor orangeColor]}
// range:NSMakeRange(0, centerText.length)];
// _pieChartView.centerAttributedText = centerText;
}
_pieChartView.legend.maxSizePercent = 1; // 图例在饼状图中的大小占比, 这会影响图例的宽高
_pieChartView.legend.formToTextSpace = 5; // 文本间隔
_pieChartView.legend.font = [UIFont systemFontOfSize:10]; // 字体大小
_pieChartView.legend.textColor = [UIColor grayColor]; // 字体颜色
_pieChartView.legend.form = ChartLegendFormCircle; // 图示样式: 方形、线条、圆形
_pieChartView.legend.formSize = 12; // 图示大小
}
return _pieChartView;
}
- (void)updateDataWithDatas:(NSArray *)datas WithTitles:(NSArray *)titles WithSetColors:(NSArray *)setColors WithSetValueColors:(NSArray *)setValueColors
{
NSMutableArray *array = [NSMutableArray array];
for (int i = 0; i < datas.count; i++) {
PieChartDataEntry *entry = [[PieChartDataEntry alloc] initWithValue:[datas[i] integerValue] label:titles[i]];
[array addObject:entry];
}
PieChartDataSet *set = [[PieChartDataSet alloc] initWithEntries:array label:@""];
// 颜色(每个扇形区域可以单独设置颜色)
// set.colors = @[UIColor.blueColor,UIColor.redColor,UIColor.greenColor];
set.colors = setColors;
set.entryLabelFont = [UIFont systemFontOfSize:0];
set.entryLabelColor = [UIColor blackColor];
set.drawIconsEnabled = NO;
// 当饼状图带折线时，dataSet.yValuePosition 数值的位置只有设置为PieChartValuePositionOutsideSlice，折线才会显示，valueLine相关属性才有用
set.drawValuesEnabled = YES; // 是否在拐点处显示数据
set.valueFont = [UIFont systemFontOfSize:12];
// set.valueColors = @[UIColor.blueColor,UIColor.redColor,UIColor.greenColor];
set.valueColors = setValueColors;
// set.xValuePosition = PieChartValuePositionInsideSlice; // 名称位置
set.yValuePosition = PieChartValuePositionOutsideSlice; // 数据位置
// set.valueLineColor = UIColor.orangeColor;
set.valueLineColor = UIColor.brownColor; // 折线颜色
// 格式化
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterPercentStyle;
pFormatter.maximumFractionDigits = 1;
pFormatter.multiplier = @1.f;
pFormatter.percentSymbol = @" %";
set.valueFormatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter];
// 相邻区块之间的间距
set.sliceSpace = 0;
// 扇形区域放大范围
set.selectionShift = 3;
// 动画开始的角度
PieChartData *data = [[PieChartData alloc] initWithDataSet:set];
self.pieChartView.data = data;
// 动画开启
[self.pieChartView animateWithXAxisDuration:2.0f easingOption:ChartEasingOptionEaseOutExpo];
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end
具体实现调用的使用（Demo在下面）
[self.chartsView updateDataWithDatas:@[@"100",@"50",@"30"]
WithTitles:@[@"费用1",@"费用2",@"费用3"]
WithSetColors:@[HEX_COLOR(0x3366FF),HEX_COLOR(0xFF0000),HEX_COLOR(0x66FF66)]
WithSetValueColors:@[HEX_COLOR(0x3366FF),HEX_COLOR(0xFF0000),HEX_COLOR(0x66FF66)]];
9、Demo下载
这个Demo是很简单的使用，宽度固定的屏幕宽、高度固定的300，根据具体要求灵活使用。
Demo下载地址：https://github.com/ShuKeHong/PieChartsDemo
结语
很简单的一个Charts饼状图！
～～ 劝君努力，势必成功！ ～～
