文档章节

PNChart

麦兜卖鱼丸
 麦兜卖鱼丸
发布于 2015/12/16 15:29
字数 401
阅读 685
收藏 5

一、项目需要实现图表(折线图)的功能,由于IOS并没有原生的控件可以开发图表,经在网络上搜索决定使用PNChart第三方库实现折线图的功能,PNChart还可以创建柱状图、饼图、圆形进度条等图表视图,我就不再一一的举例实现相关的视图。

(1)创建一个折线图;

//折线图
    self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 30, [UIScreen mainScreen].bounds.size.width, 200)];
    self.lineChart.legendStyle = PNLegendItemStyleStacked;
    self.lineChart.delegate = self;
    
    self.lineChart.showCoordinateAxis = YES; //显示坐标系
    self.lineChart.showGenYLabels = YES;
    self.lineChart.showLabel = YES;
    self.lineChart.thousandsSeparator = YES;
    
    
    [self.lineChart setXLabels:@[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月"]];
    NSArray *data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2, @60.1, @160.1, @126.4, @262.2, @186.2, @60.1, @160.1];
    
    PNLineChartData *data01 = [PNLineChartData new]; //chart数据
    data01.dataTitle = @"Alpha";
    data01.color = PNFreshGreen; //折线的颜色
    data01.itemCount = self.lineChart.xLabels.count; //x轴坐标item数
    data01.inflexionPointStyle = PNLineChartPointStyleCircle; //数值点的样式
    
    data01.getData = ^(NSUInteger index) {
        
        CGFloat yValue = [data01Array[index] floatValue];
        return [PNLineChartDataItem dataItemWithY:yValue];
    };
    
    self.lineChart.chartData = @[data01];
    [self.lineChart strokeChart]; //画折线,带动画
    
    
//PNChartDelegate委托的实现  
- (void)userClickedOnLinePoint:(CGPoint)point lineIndex:(NSInteger)lineIndex {
    
    NSLog(@"Click on line %f, %f, line index is %d",point.x, point.y, (int)lineIndex);
}


- (void)userClickedOnLineKeyPoint:(CGPoint)point lineIndex:(NSInteger)lineIndex pointIndex:(NSInteger)pointIndex {
    
    NSLog(@"Click Key on line %f, %f line index is %d and point index is %d",point.x, point.y,(int)lineIndex, (int)pointIndex);
    
    //在这个位置弹出逻辑
}


(2)更新折线图的数据;

你可以创建一个更新的按钮或者是一些选项卡来更新lineChart的内容;

//更新折线的数据
- (void)updateView {
    
    NSArray *data01Array = @[@80.1, @180.1, @126.4, @292.2, @186.2, @80.1, @160.1, @126.4, @262.2, @186.2, @80.1, @160.1];
    
    PNLineChartData *data01 = [PNLineChartData new];
    data01.dataTitle = @"Alpha";
    data01.color = PNFreshGreen;
    data01.itemCount = self.lineChart.xLabels.count;
    data01.inflexionPointStyle = PNLineChartPointStyleCircle;
    
    data01.getData = ^(NSUInteger index) {
        
        CGFloat yValue = [data01Array[index] floatValue];
        return [PNLineChartDataItem dataItemWithY:yValue];
    };
    
    [self.lineChart updateChartData:@[data01]];
    [self.lineChart strokeChart];
}

折线图效果:

© 著作权归作者所有

麦兜卖鱼丸
粉丝 12
博文 69
码字总数 69333
作品 0
桂林
iOS工程师
私信 提问
iOS | PNChart与UITableView的联动

效果图 1.点击chart,tableView对应模块高亮 PNChart提供了一个代理方法,用来处理用户的点击事件: 2.点击cell,chart对应模块高亮 PNChart并未提供相应方法让某一模块高亮,怎么办? 思路:...

无夜之星辰
2018/07/10
0
0
PNChart第三方控件的适配系统的问题

@彭博 你好,想跟你请教个问题:我在项目中pod update了一下,结果PNChart在6.1的模拟器上可以运行通过 在6.3的模拟器上运行不通过 什么原因啊!可以为我解答一下吗

开发小菜鸡
2015/06/10
74
1
iOS 导入第三方问题啊!!!进来看看都大牛们!!

用cocosPod导入三方画表库(https://github.com/kevinzhow/PNChart),发现导入的类不一样呢具体看图。 不知道大家看明白没有就是同样的linechart类我导入我的工程后发现很多属性没有了。这事...

qiwenhua1988
2014/10/25
1K
1
PNChart,简洁高效有动画效果的iOS图表库

导入 pod导入相对简单,要手动导入这个库,先下载下来(https://github.com/kevinzhow/PNChart),解压后把PNChart文件夹拖入工程中 运行发现#import"PNRadarChartDataItem.h"报红,在它的....

ios122
2015/11/06
0
5
Swift 3.0 Charts 简单使用

前言:由于项目(Swift项目与OC混编 OC控制器使用Charts)需要用到折线图,之前用过PNChart感觉还不错,引入后发现效果却没安卓的好(安卓使用MPAndroidChart),So最终决定引入Charts。尽管网...

RiberWang
03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部