iOS Charts 三方框架的集成及使用

[toc]

前言

应公司项目需求，需要加一个饼状图，后来在网上搜索了找到了Charts框架的，Star有1w8,阅读了文档后发现这个框架和MPAndroidChart界面一致。

手动导入Charts框架

1.点击这里下载工程demo

2.新建工程，取名随意，例ChartDemo

3.复制Charts-master整个文件到ChartsDemo工程中，如下图：

4.导入Charts.xcodeproj工程，

右键工程文件，点击Add Files to...如下图:

将Charts文件夹中的Charts.xcodeproj工程文件导入到ChartsDemo工程中，注意导入的是Charts.xcodeproj工程，而不是Charts文件夹，如下图：

5.添加Charts.framework

找到General->Embedded Binaries，点击+号添加Charts.framework，如下图：

添加的iOS的framework，如下图：

6.建立OC和Swift的桥接文件

在ChartsDemo工程中新建一个Swift文件，名字随便取

这时候会提示是否建立桥接文件，直接选Create Bridging Header选项，如下图：

生成桥接文件后，在.h文件中插入代码@import Charts; 如下图：

7.测试

在ViewController.m中进行测试导入桥接文件ChartDemo-Bridging-Header.h，导入类Charts,
加入视图，代码如下：

PieChartView *chatView = [[PieChartView alloc] initWithFrame:CGRectMake(10,100,300,300)];
[self.view addSubview:chatView];

如下图：

编译运行后如下图：

由于没有给数据，所以显示的是No chart date aviailable.
至此，集成Charts完毕！

使用Charts制作饼图

上面使用完成的代码是创建了饼图视图对象，接下来我们给这个饼图绘制视图样式

一、创建饼状图对象

创建饼状图对象用到类是PieChartView.h, 代码如下:

self.pieChartView = [[PieChartView alloc] initWithFrame:CGRectMake(10,100, 400, 400)];
self.pieChartView.legend.enabled = YES;     //是否显示饼图图例描述
//     self.pieChartView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:self.pieChartView];

二、设置饼状图外观样式

1.基本样式

[self.pieChartView setExtraOffsetsWithLeft:5 top:10 right:70 bottom:5];//饼状图距离边缘的间隙
   self.pieChartView.usePercentValuesEnabled = YES;//是否根据所提供的数据, 将显示数据转换为百分比格式
   self.pieChartView.dragDecelerationEnabled = YES;//拖拽饼状图后是否有惯性效果
   self.pieChartView.drawSlicesUnderHoleEnabled= NO; //是否掏空饼图中心
   self.pieChartView.chartDescription.enabled = YES;//饼状图描述
   self.pieChartView.drawCenterTextEnabled = YES;//是否显示区块文本
   //    [self.pieChartView setRotationEnabled:false];//禁止拖拽,默认true

2.设置饼状图中间的空心样式

空心有两个圆组成, 一个是hole, 一个是transparentCircle, transparentCircle里面是hole, 所以饼状图中间的空心也就是一个同心圆. 代码如下:

self.pieChartView.drawHoleEnabled = YES;//饼状图是否是空心
    self.pieChartView.holeRadiusPercent = 0.5;//空心半径占比
    self.pieChartView.holeColor = [UIColor clearColor];//空心颜色
    self.pieChartView.transparentCircleRadiusPercent = 0.55;//半透明空心半径占比
    self.pieChartView.transparentCircleColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:0.3];//半透明空心的颜色

3.设置饼状图中心的文本

当饼状图是空心样式时, 可以在饼状图中心添加文本, 添加文本有两种方法. 一种方法是使用centerText 属性添加, 这种方法不能设置字体颜色、大小等. 另一种方法是使用centerAttributedText属性添加, 这种方法添加的富文本, 因此就可以对字体进行进一步美化了. 代码如下:

if (self.pieChartView.isDrawHoleEnabled == YES) {
        //普通文本
        // self.pieChartView.centerText = @"饼状图";//中间文字
        //富文本
        NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"];
        [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:13],
                                    NSForegroundColorAttributeName: [UIColor orangeColor]}
                            range:NSMakeRange(0, centerText.length)];
        self.pieChartView.centerAttributedText = centerText;
    }

4.设置饼状图描述及图例样式

设置数据图例的描述位置及

//图例描述
 self.pieChartView.legend.maxSizePercent = 1;//图例在饼状图中的大小占比, 这会影响图例的宽高
 self.pieChartView.legend.formToTextSpace = 5;//文本间隔
 self.pieChartView.legend.font = [UIFont systemFontOfSize:10];//字体大小
 self.pieChartView.legend.textColor = [UIColor grayColor];//字体颜色
 //图例在饼状图中的位置
 self.pieChartView.legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight;
 self.pieChartView.legend.verticalAlignment = ChartLegendVerticalAlignmentTop;
 self.pieChartView.legend.orientation = ChartLegendOrientationVertical;
 self.pieChartView.legend.form = ChartLegendFormCircle;//图示样式: 方形、线条、圆形
 self.pieChartView.legend.formSize = 8;//图示大小

三、为饼状图提供数据

为饼状图提供数据, 首先需要创建两个数组arr和nameArr, arr数组存放饼状图每个区块的数据, nameArr存放的是每个区块的名称或者描述.
接着需要用PieChartDataSet.h类创建dataSet对象, 创建时将arr放进去.
然后需要用PieChartData.h类创建data对象, 创建时将nameArr和dataSet对象放进去.
最后直接把data对象赋值给饼状图的data属性即可. 创建data对象代码如下:

- (PieChartData *)setData{

    //每个区块的数据
    //每个区块的名称或描述
    NSMutableArray *arr = [[NSMutableArray alloc]init];
    NSMutableArray *nameArr = [[NSMutableArray alloc]init];
    NSArray *dd = @[@"3",@"4",@"5"];
    NSArray *hh = @[@"asdas",@"dfgdfgd",@"dfgdfg"];
    [arr addObjectsFromArray:dd];
    [nameArr addObjectsFromArray:hh];
//    for (pieChart *model in _pieCharModel.pieChart) {
//        [arr addObject:model.totalamt];//@[@"8.54",@"3.26",@"2"];
//        [nameArr addObject:model.typename];
//    }

    NSMutableArray *values = [[NSMutableArray alloc] init];
    // IMPORTANT: In a PieChart, no values (Entry) should have the same xIndex (even if from different DataSets), since no values can be drawn above each other.
    for (int i = 0; i < arr.count; i++)
    {
        NSString * aaa = arr[i];
        double bb = aaa.doubleValue;
        [values addObject:[[PieChartDataEntry alloc] initWithValue: bb label: nameArr[i]]];
    }
    //dataSet
    PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:values label:@"aaaf"];
    dataSet.drawValuesEnabled = YES;//是否绘制显示数据
    NSMutableArray *colors = [[NSMutableArray alloc] init];
    [colors addObjectsFromArray:ChartColorTemplates.vordiplom];     //色值区间1
    [colors addObjectsFromArray:ChartColorTemplates.joyful];        //色值区间2
    [colors addObjectsFromArray:ChartColorTemplates.colorful];      //色值区间3
    [colors addObjectsFromArray:ChartColorTemplates.liberty];       //色值区间4
    [colors addObjectsFromArray:ChartColorTemplates.pastel];        //色值区间5
    [colors addObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];    //色值区间6
    dataSet.colors = colors;//区块颜色  26种颜色，同gitDemo一致
    dataSet.sliceSpace = 5;//相邻区块之间的间距
    dataSet.selectionShift = 8;//选中区块时, 放大的半径
    dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名称位置
    dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//数据位置
    //数据与区块之间的用于指示的折线样式
    dataSet.valueLinePart1OffsetPercentage = 0.85;//折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
    dataSet.valueLinePart1Length = 0.5;//折线中第一段长度占比
    dataSet.valueLinePart2Length = 0.4;//折线中第二段长度最大占比
    dataSet.valueLineWidth = 1;//折线的粗细
    dataSet.valueLineColor = [UIColor brownColor];//折线颜色
    //data
    PieChartData *data = [[PieChartData alloc] initWithDataSet:dataSet];
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    formatter.numberStyle = NSNumberFormatterPercentStyle;
    formatter.maximumFractionDigits = 0;//小数位数
    formatter.multiplier = @1.f;
    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:formatter]];//设置显示数据格式
    [data setValueTextColor:[UIColor brownColor]];          //设置区块字体颜色
    [data setValueFont:[UIFont systemFontOfSize:10]];       //设置区块字体大小
    self.pieChartView.data = data;
    [self.pieChartView setNeedsDisplay];        //显示数据
    return data;
    }   

运行结果如下图：

如果不需要饼状图的描述, 可以将饼状图的legend.enabled赋值为NO, 将描述去掉即可, 代码如下:

self.pieChartView.legend.enabled = NO;

如果不想显示空心圆，可以将饼状图的drawHoleEnabled赋值为NO, 将中间的文本去掉即可, 代码如下:

self.pieChartView.drawHoleEnabled = NO;

其它属性已在demo中做了注解，点击这里下载查看