iOS使用Charts框架绘制饼状图

程序员文章站 2024-02-19 19:49:34

首先先看一下效果: 饼状图一、创建饼状图对象创建饼状图对象用到类是piechartview.h, 代码如下: self.piechartview =...

首先先看一下效果:

iOS使用Charts框架绘制饼状图

饼状图

一、创建饼状图对象

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

self.piechartview = [[piechartview alloc] init];
self.piechartview.backgroundcolor = bgcolor;
[self.view addsubview:self.piechartview];
[self.piechartview mas_makeconstraints:^(masconstraintmaker *make) {
 make.size.mas_equalto(cgsizemake(300, 300));
 make.center.mas_equalto(self.view);
}];

二、设置饼状图外观样式

1. 基本样式

[self.piechartview setextraoffsetswithleft:30 top:0 right:30 bottom:0];//饼状图距离边缘的间隙
self.piechartview.usepercentvaluesenabled = yes;//是否根据所提供的数据, 将显示数据转换为百分比格式
self.piechartview.dragdecelerationenabled = yes;//拖拽饼状图后是否有惯性效果
self.piechartview.drawslicetextenabled = yes;//是否显示区块文本

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

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

self.piechartview.drawholeenabled = yes;//饼状图是否是空心
self.piechartview.holeradiuspercent = 0.5;//空心半径占比
self.piechartview.holecolor = [uicolor clearcolor];//空心颜色
self.piechartview.transparentcircleradiuspercent = 0.52;//半透明空心半径占比
self.piechartview.transparentcirclecolor = [uicolor colorwithred:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];//半透明空心的颜色

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

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

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;
}

4. 设置饼状图描述

self.piechartview.descriptiontext = @"饼状图示例";
self.piechartview.descriptionfont = [uifont systemfontofsize:10];
self.piechartview.descriptiontextcolor = [uicolor graycolor];

6. 设置饼状图图例样式

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.position = chartlegendpositionbelowchartcenter;//图例在饼状图中的位置
self.piechartview.legend.form = chartlegendformcircle;//图示样式: 方形、线条、圆形
self.piechartview.legend.formsize = 12;//图示大小

三、为饼状图提供数据

为饼状图提供数据, 首先需要创建两个数组yvals和xvals, yvals数组存放饼状图每个区块的数据, xvals存放的是每个区块的名称或者描述.

接着需要用piechartdataset.h类创建dataset对象, 创建时将yvals放进去.

然后需要用piechartdata.h类创建data对象, 创建时将xvals和dataset对象放进去.

最后直接把data对象赋值给饼状图的data属性即可. 创建data对象代码如下:

- (piechartdata *)setdata{
 double mult = 100;
 int count = 5;//饼状图总共有几块组成
 //每个区块的数据
 nsmutablearray *yvals = [[nsmutablearray alloc] init];
 for (int i = 0; i < count; i++) {
 double randomval = arc4random_uniform(mult + 1);
 barchartdataentry *entry = [[barchartdataentry alloc] initwithvalue:randomval xindex:i];
 [yvals addobject:entry];
 }
 //每个区块的名称或描述
 nsmutablearray *xvals = [[nsmutablearray alloc] init];
 for (int i = 0; i < count; i++) {
 nsstring *title = [nsstring stringwithformat:@"part%d", i+1];
 [xvals addobject:title];
 }
 //dataset
 piechartdataset *dataset = [[piechartdataset alloc] initwithyvals:yvals label:@""];
 dataset.drawvaluesenabled = yes;//是否绘制显示数据
 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]];
 dataset.colors = colors;//区块颜色
 dataset.slicespace = 0;//相邻区块之间的间距
 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] initwithxvals:xvals dataset:dataset];
 nsnumberformatter *formatter = [[nsnumberformatter alloc] init];
 formatter.numberstyle = nsnumberformatterpercentstyle;
 formatter.maximumfractiondigits = 0;//小数位数
 formatter.multiplier = @1.f;
 [data setvalueformatter:formatter];//设置显示数据格式
 [data setvaluetextcolor:[uicolor browncolor]];
 [data setvaluefont:[uifont systemfontofsize:10]];
 return data;
}

运行结果如下:

iOS使用Charts框架绘制饼状图