PNChart,简洁高效有动画效果的iOS图表库

导入

pod导入相对简单,要手动导入这个库,先下载下来(https://github.com/kevinzhow/PNChart),解压后把PNChart文件夹拖入工程中

运行发现#import"PNRadarChartDataItem.h"报红,在它的.h文件里引入#import<UIKit/UIKit.h>头文件;#import<UICountingLabel/UICountingLabel.h>报错,下载UICountingLabel(https://github.com/dataxpress/UICountingLabel)解压后把UICountingLabel的.m和.h文件拖入工程,把报错的#import<UICountingLabel/UICountingLabel.h>头文件换为#import"UICountingLabel.h"

项目中引用头文件#import"PNChart.h"

折线图

PNLineChart * lineChart = [[PNLineChartalloc]initWithFrame:CGRectMake(0,135.0,SCREEN_WIDTH,200.0)];
//X轴数据
[lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];

//Y轴数据
NSArray * data01Array =@[@60.1,@160.1,@126.4,@262.2,@186.2];
PNLineChartData *data01 = [PNLineChartDatanew];
data01.color = PNFreshGreen;
data01.itemCount = lineChart.xLabels.count;
data01.getData = ^(NSUInteger index) {
    CGFloat yValue = [data01Array[index] floatValue];
    return [PNLineChartDataItemdataItemWithY:yValue];
};

//可以添加多条折线
NSArray * data02Array =@[@20.1,@180.1,@26.4,@202.2,@126.2];
PNLineChartData *data02 = [PNLineChartDatanew];
data02.color = PNTwitterColor;
data02.itemCount = lineChart.xLabels.count;
data02.getData = ^(NSUInteger index) {
    CGFloat yValue = [data02Array[index] floatValue];
    return [PNLineChartDataItemdataItemWithY:yValue];
};

lineChart.chartData = @[data01, data02];
[lineChart strokeChart];
//加载在视图上
[self.windowaddSubview:lineChart];

柱状图

PNBarChart * barChart = [[PNBarChartalloc]initWithFrame:CGRectMake(0,135.0,SCREEN_WIDTH,200.0)];
 //X轴数据
[barChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];
//Y轴数据
[barChart setYValues:@[@1, @10,@2,@6,@3]];
[barChart strokeChart];

//加载在视图上
[self.windowaddSubview:barChart];

饼状图

PNPieChart *pieChart = [[PNPieChartalloc]initWithFrame:CGRectMake(40.0,155.0,240.0,240.0)items:items];
//饼状图文字颜色
pieChart.descriptionTextColor = [UIColorwhiteColor];
pieChart.descriptionTextFont  = [UIFontfontWithName:@"Avenir-Medium"size:14.0];
//绘制
[pieChart strokeChart];

//加载在视图上
[self.windowaddSubview:pieChart];

圆形进度条

// total参数是进度条的总数据量,current是当前的数据量,closewise是绘制方向,YES是从左到右,NO为从右到左
PNCircleChart *circleChart = [[PNCircleChartalloc]initWithFrame:CGRectMake(40.0,155.0,240.0,240.0)total:@100current:@30clockwise:NO];

//绘制图形
[circleChart strokeChart];

//加载在视图上
[self.windowaddSubview:circleChart];

文章转载自 开源中国社区[https://www.oschina.net]

时间: 2024-07-31 08:22:18

PNChart,简洁高效有动画效果的iOS图表库的相关文章

IOS等待时动画效果的实现_IOS

查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

IOS实现视频动画效果的启动图_IOS

先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

AngularJS中实现显示或隐藏动画效果的方式总结_AngularJS

AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage →依赖:var app = angular.module("app",["ngAnimate"]); →

AngularJS中实现动画效果的方法_AngularJS

AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script> 还需在应用中使用模型 ngAnimate: <body ng-app="ngAnimate

iOS的GIF动画效果实现

GIF在iOS中的使用场景 GIF在iOS中的使用场景有以下三个方面. (1)GIF图片分解为单帧图片. (2)一系列单帧图片合成GIF图片. (3)iOS系统上展示GIF动画效果. 在GIF的合成和分解方面将会接触到iOS图像处理核心框架ImageIO,作为iOS系统中图像处理的核心框架,它为我们提供了各种丰富的API,本文将要实现的GIF分解与合成功能,通过ImageIO就可以很方便地实现.GIF动画展示效果将结合UIImageView和定时器,利用逐帧展示的方式为大家呈现GIF动画效果.

iOS easing tween 动画效果

在iOS 开发中,要做一个动画效果,我们会用到CAKeyframeAnimation. 这个库提供了一些对frame 动画的控制,什麽是frame 动画? frame 动画就好比电视动画那样,由一格一格的图画(也可以想像成frame)构成, 快速播放图画便成了动画. 在CAKeyframeAnimation 的概念是一样, 你只需要提供keyframe 的信息, 程序会自动完成keyframe之间的"图画". 如果大家有用过adobe flash 这工具, 其实是等同motion/sh

Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)_Android

做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

iOS仿支付宝芝麻信用分数仪表盘动画效果_IOS

先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

iOS 基本动画、关键帧动画、利用缓动函数实现物理动画效果_IOS

iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果 先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue #3. 设置动画最终停留的位置 #4. 将配置好的动画添加到layer层中 举个例子, 比如实现一个圆形从上往下移动, 上代码: //设置原始画面 UIView *showView = [[UI