用PNChart绘制饼状图简介
写在前面
最近做的小Demo中有一个绘制饼状图的需求。在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个。PNChart是一个90后的中国boy写的第三方库(我还在学基础,人家已经写了一个库了, /心塞),这个库可以绘制饼状图、折线图、散点图等,优点是使用简单,容易上手,有动画效果,而缺点是可定制能力差。
PNChart使用准备
想要使用PNChart绘制饼状图,首先需要在自己的项目中导入该第三个库。导入有两种方式,分别介绍如下
1、使用CocoaPods安装
在Podfile文件中输入 pod 'PNChart'
在终端进入Podfile所在目录,然后运行pod install
在用到PNChart的文件中导入头文件#import PNChart.h
2、手动导入
在github上下载PNChart,下载地址:
将PNChart文件夹导入到工程中。
此外,PNChart有自己的依赖库,分别是:
- Foundation.framework
- UIKit.framework
- CoreGraphics.framework
- QuartzCore.framework
在使用PNChart前也要讲上述框架添加到工程中,如下图

开始使用
在我的Demo中,创建了一个view(假设叫Aview),饼状图添加到Aview上,然后创建一个controller,controller.view = Aview。当然,饼状图也可以直接放到controller的view上,但这种方式不利于controller的扩展。
1、在Aview中声明一个PNPieChart类型的属性pieChart
@property (strong, nonatomic) PNPieChart *pieChart;
2、在Aview的初始化方法中对pieChart进行初始化
//初始化
_pieChart = [[PNPieChart alloc] initWithFrame:CGRectZero items:[NSArray array]];
//设置颜色和字体
_pieChart.descriptionTextColor = [UIColor whiteColor];
_pieChart.descriptionTextFont = [UIFont fontWithName:@"Avenir-Medium" size:18.0];
默认的初始化函数为initWithFrame:items,其中items为绘制时需要用到的数据,初始化时可以将该数组设置为空。
3、在Aview中自定义一个绘制pieChart的函数,用于外部调用传入数据
//items为传入的原始数据参数,不需要转化为比例
- (void)drawPieChart:(NSArray *)items
{
//获取要绘制的数据
NSArray *dataitems =
@[[PNPieChartDataItem dataItemWithValue: [items[0] floatValue] color:PNDeepGreen description:@"男性"],
[PNPieChartDataItem dataItemWithValue:[items[1] floatValue] color:PNLightGreen description:@"女性"],
[PNPieChartDataItem dataItemWithValue:[items[2] floatValue] color:PNLightBlue description:@"未知"]];
//更新需要绘制的数据并绘制
[self.pieChart updateChartData:dataitems];
[self.pieChart strokeChart];
//设置标注
self.pieChart.legendStyle = PNLegendItemStyleStacked;//标注摆放样式
self.pieChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];
UIView *legend = [self.pieChart getLegendWithMaxWidth:200];
CGFloat legendX = self.width/2.0;
CGFloat legendY = self.bottom - 2*legend.height;
[legend setFrame:CGRectMake(legendX, legendY, legend.width, legend.height)];
//将标注和饼状图添加到view上
[self addSubview:legend];
[self addSubview:_pieChart];
}
4、在controller中添加view,在需要绘制饼状图的地方调用绘制方法,并传入绘制参数。
绘制结果
下图是一个简单的绘制结果

总结
饼状图的绘制相对来说是比较简单的,绘制的效果也还不错,但有几点需要注意的地方
1、按照上述步骤设置并编写好代码后,运行时发现 #import"PNRadarChartDataItem.h"
报错,此时在该头文件中添加 #import<UIKit/UIKit.h>
头文件杰克
2、头文件#import<UICountingLabel/UICountingLabel.h>
提示找不到,需要下载该头文件。下载地址: ,下载完后解压将UICountingLabel.h和UICountingLabel.m加入到PNChart头文件中,然后将报错的那句导入代码改为#import<UICountingLabel.h>
3、使用PNChart绘制饼状图时,传入的饼状图数据为原始数据,如下图,PNChart会自动将要绘制的数据转换为比例。

4、PNChart绘制的饼状图中,显示的各比例参数没有小数,因此有时可能会出现饼状图的几个部分之间比例家和不为1的情况。
用PNChart绘制饼状图简介的更多相关文章
- 第166天:canvas绘制饼状图动画
canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Canvas(3)---绘制饼状图
Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...
- canvas动态绘制饼状图,
当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- IOS之以UIBezierPath绘制饼状图
1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath* aPath = [[UIBe ...
- [Echarts]用Echarts绘制饼状图
在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...
- d3绘制饼状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- matplotlib绘制饼状图
源自http://blog.csdn.net/skyli114/article/details/77508430?ticket=ST-41707-PzNbUDGt6R5KYl3TkWDg-passpo ...
- Graphic系统综合练习案例-绘制饼状图
这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...
随机推荐
- django 执行 python manage.py makemigrations 报错
RuntimeError: Model class app_anme.models.xxx doesn't declare an explicit app_label and isn't in an ...
- conda常用命令总结
conda 一些背景历史以及如何安装这里就不说了,因为实在是漫天都在飞,随便都能找到相关的资料.我这里只是将平时常用到的 Conda 命令进行汇总,以备不时之需,因为我也是一个忘性极大的人,实在是记不 ...
- prototype和__proto__区别
prototype和__proto__分别是显式原型和隐式原型,直接上代码吧: function person(){ this.age = 12; } person.prototype; //Obje ...
- HDU - 3973 AC's String(Hash+线段树)
http://acm.hdu.edu.cn/showproblem.php?pid=3973 题意 给一个词典和一个主串.有两种操作,查询主串某个区间,问这主串区间中包含多少词典中的词语.修改主串某一 ...
- 03-Windows Server 2016 IIS的安装与配置
1. 打开服务器管理器,点击[添加角色和功能选项]. 2. 进入“添加角色和功能向导”页面,点击下一步. 3. 安装类型选择[基于角色或基于功能的安装],点击下一步. 4. 进入服务器选 ...
- Jacob 调用金税系统
1.调用打印方法时,若是有预览弹窗提示,程序会阻塞住,并在控制台打印一行: C:\Program Files (x86)\��Ʊ���\914601007603699430.0\Config\Prin ...
- pyqt5的使用目录
pyqt5的安装 我的第一个例子 标签控件QLabel的使用 按钮QPushButton 信号与槽 pyqt5模块介绍 pycharm活动模板 QObject 定时器 QWidget类-坐标系 ...
- TypeError: Only valid with DatetimeIndex, TimedeltaIndex or PeriodIndex, but got an instance of 'Index'
这个问题说的很清楚,就是类型不对,需要转化类型,首先讲一下这个问题是在使用pandas的resample函数激发的,官方文档解释的较为清楚,如下: Convenience method for fre ...
- JQuery 的Bind()事件
刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...
- 阿里云服务器 ECS Linux 禁止IP 通过 SSH 登录
这几天买的服务器老是受到黑客攻击被破解登录密码,今天修改了登录规则发现只有固定ip可以访问,其他ip即使有密码也无法登录我的服务器,但是能通过ip访问我的网站,哈哈. 限制 IP SSH 登录解决步骤 ...