iOS开发 饼状图（在OC中使用Charts）

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 
#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饼状图！
～～ 劝君努力，势必成功！ ～～