一个简单漂亮的iOS图表库:PNChart

PNChart是一个简单漂亮的动画图表库，Piner 和 CoinsMan 的 iOS 客户端中使用了这个框架。你也可以查看 Swift 版本（开源链接：https://github.com/kevinzhow/PNChart-Swift）。

要求

PNChart 适用于 iOS 7.0 或更高版本，与 ARC 项目兼容。如果需要支持 iOS 6 ，请使用 0.8.1 版本之前的 PNChart 。注意 0.8.2 版本仅支持 iOS 8.0+ ，0.8.3 及更新版本支持 iOS 7.0+ 。

PNChart 依赖于下列框架，这些框架已经嵌入了 Xcode 开发工具：

• Foundation.framework
• UIKit.framework
• CoreGraphics.framework
• QuartzCore.framework

你需要 LLVM 3.0 或更高版本来建立 PNChart 。

安装

• 通过 CocoaPods 安装（推荐）：

1、在你的 Podfile 文件中添加 pod 'PNChart' 。

2、运行 pod install 进行安装。

3、按需导入头文件 #import "PNChart.h" 。

• 手动安装：

拷贝 PNChart 文件夹到你的工程中。

使用

Objective-C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

#import "PNChart.h"   //For Line Chart PNLineChart * lineChart = [ [ PNLineChart alloc ] initWithFrame :CGRectMake ( 0 , 135.0 , SCREEN_WIDTH , 200.0 ) ] ; [ lineChart setXLabels : @ [ @"SEP 1" , @"SEP 2" , @"SEP 3" , @"SEP 4" , @"SEP 5" ] ] ;   // Line Chart No.1 NSArray * data01Array = @ [ @ 60.1 , @ 160.1 , @ 126.4 , @ 262.2 , @ 186.2 ] ; PNLineChartData *data01 = [ PNLineChartData new ] ; data01 . color = PNFreshGreen ; data01 . itemCount = lineChart . xLabels . count ; data01 . getData = ^ ( NSUInteger index ) {      CGFloat yValue = [ data01Array [ index ] floatValue ] ;      return [ PNLineChartDataItem dataItemWithY :yValue ] ; } ; // Line Chart No.2 NSArray * data02Array = @ [ @ 20.1 , @ 180.1 , @ 26.4 , @ 202.2 , @ 126.2 ] ; PNLineChartData *data02 = [ PNLineChartData new ] ; data02 . color = PNTwitterColor ; data02 . itemCount = lineChart . xLabels . count ; data02 . getData = ^ ( NSUInteger index ) {      CGFloat yValue = [ data02Array [ index ] floatValue ] ;      return [ PNLineChartDataItem dataItemWithY :yValue ] ; } ;   lineChart . chartData = @ [ data01 , data02 ] ; [ lineChart strokeChart ] ;

Objective-C

1 2 3 4 5 6 7

#import "PNChart.h"   //For BarC hart PNBarChart * barChart = [ [ PNBarChart alloc ] initWithFrame :CGRectMake ( 0 , 135.0 , SCREEN_WIDTH , 200.0 ) ] ; [ barChart setXLabels : @ [ @"SEP 1" , @"SEP 2" , @"SEP 3" , @"SEP 4" , @"SEP 5" ] ] ; [ barChart setYValues : @ [ @ 1 ,    @ 10 , @ 2 , @ 6 , @ 3 ] ] ; [ barChart strokeChart ] ;

Objective-C

1 2 3 4 5 6 7 8

#import "PNChart.h"   //For Circle Chart   PNCircleChart * circleChart = [ [ PNCircleChart alloc ] initWithFrame :CGRectMake ( 0 , 80.0 , SCREEN_WIDTH , 100.0 ) total : [ NSNumber numberWithInt : 100 ] current : [ NSNumber numberWithInt : 60 ] clockwise :NO shadow :NO ] ; circleChart . backgroundColor = [ UIColor clearColor ] ; [ circleChart setStrokeColor :PNGreen ] ; [ circleChart strokeChart ] ;

 

Objective-C

1 2 3 4 5 6 7 8 9 10 11

# import "PNChart.h" //For Pie Chart NSArray *items = @ [ [ PNPieChartDataItem dataItemWithValue : 10 color :PNRed ] ,                            [ PNPieChartDataItem dataItemWithValue : 20 color :PNBlue description : @"WWDC" ] ,                            [ PNPieChartDataItem dataItemWithValue : 40 color :PNGreen description : @"GOOL I/O" ] ,                            ] ;   PNPieChart *pieChart = [ [ PNPieChart alloc ] initWithFrame :CGRectMake ( 40.0 , 155.0 , 240.0 , 240.0 ) items :items ] ; pieChart . descriptionTextColor = [ UIColor whiteColor ] ; pieChart . descriptionTextFont    = [ UIFont fontWithName : @"Avenir-Medium" size : 14.0 ] ; [ pieChart strokeChart ] ;

Objective-C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

# import "PNChart.h" //For Scatter Chart   PNScatterChart *scatterChart = [ [ PNScatterChart alloc ] initWithFrame :CGRectMake ( SCREEN_WIDTH / 6.0 - 30 , 135 , 280 , 200 ) ] ; [ scatterChart setAxisXWithMinimumValue : 20 andMaxValue : 100 toTicks : 6 ] ; [ scatterChart setAxisYWithMinimumValue : 30 andMaxValue : 50 toTicks : 5 ] ;   NSArray * data01Array = [ self randomSetOfObjects ] ; PNScatterChartData *data01 = [ PNScatterChartData new ] ; data01 . strokeColor = PNGreen ; data01 . fillColor = PNFreshGreen ; data01 . size = 2 ; data01 . itemCount = [ [ data01Array objectAtIndex : 0 ] count ] ; data01 . inflexionPointStyle = PNScatterChartPointStyleCircle ; __block NSMutableArray *XAr1 = [ NSMutableArray arrayWithArray : [ data01Array objectAtIndex : 0 ] ] ; __block NSMutableArray *YAr1 = [ NSMutableArray arrayWithArray : [ data01Array objectAtIndex : 1 ] ] ; data01 . getData = ^ ( NSUInteger index ) {      CGFloat xValue = [ [ XAr1 objectAtIndex :index ] floatValue ] ;      CGFloat yValue = [ [ YAr1 objectAtIndex :index ] floatValue ] ;      return [ PNScatterChartDataItem dataItemWithX :xValue AndWithY :yValue ] ; } ;   [ scatterChart setup ] ; self . scatterChart . chartData = @ [ data01 ] ; /*** this is for drawing line to compare CGPoint start = CGPointMake(20, 35); CGPoint end = CGPointMake(80, 45); [scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack]; ***/ scatterChart . delegate = self ;

图例

PNChart 允许在折线图和饼状图中添加图例，图例可以竖向堆叠布置或者横向并列布置。

Objective-C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

#import "PNChart.h"   //For Line Chart   //Add Line Titles for the Legend data01 . dataTitle = @"Alpha" ; data02 . dataTitle = @"Beta Beta Beta Beta" ;   //Build the legend self . lineChart . legendStyle = PNLegendItemStyleSerial ; self . lineChart . legendFontSize = 12.0 ;          UIView *legend = [ self . lineChart getLegendWithMaxWidth : 320 ] ;   //Move legend to the desired position and add to view [ legend setFrame :CGRectMake ( 100 , 400 , legend . frame . size . width , legend . frame . size . height ) ] ; [ self . view addSubview :legend ] ;   //For Pie Chart   //Build the legend self . pieChart . legendStyle = PNLegendItemStyleStacked ; self . pieChart . legendFontSize = 12.0 ; UIView *legend = [ self . pieChart getLegendWithMaxWidth : 200 ] ;   //Move legend to the desired position and add to view [ legend setFrame :CGRectMake ( 130 , 350 , legend . frame . size . width , legend . frame . size . height ) ] ; [ self . view addSubview :legend ] ;

更新数据

实时更新数据也非常简单。

Objective-C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

if ( [ self . title isEqualToString : @"Line Chart" ] ) {        // Line Chart #1      NSArray * data01Array = @ [ @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) ] ;      PNLineChartData *data01 = [ PNLineChartData new ] ;      data01 . color = PNFreshGreen ;      data01 . itemCount = data01Array . count ;      data01 . inflexionPointStyle = PNLineChartPointStyleTriangle ;      data01 . getData = ^ ( NSUInteger index ) {          CGFloat yValue = [ data01Array [ index ] floatValue ] ;          return [ PNLineChartDataItem dataItemWithY :yValue ] ;      } ;        // Line Chart #2      NSArray * data02Array = @ [ @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) , @ ( arc4random ( ) % 300 ) ] ;      PNLineChartData *data02 = [ PNLineChartData new ] ;      data02 . color = PNTwitterColor ;      data02 . itemCount = data02Array . count ;      data02 . inflexionPointStyle = PNLineChartPointStyleSquare ;      data02 . getData = ^ ( NSUInteger index ) {          CGFloat yValue = [ data02Array [ index ] floatValue ] ;          return [ PNLineChartDataItem dataItemWithY :yValue ] ;      } ;        [ self . lineChart setXLabels : @ [ @"DEC 1" , @"DEC 2" , @"DEC 3" , @"DEC 4" , @"DEC 5" , @"DEC 6" , @"DEC 7" ] ] ;      [ self . lineChart updateChartData : @ [ data01 , data02 ] ] ;   } else if ( [ self . title isEqualToString : @"Bar Chart" ] ) {      [ self . barChart setXLabels : @ [ @"Jan 1" , @"Jan 2" , @"Jan 3" , @"Jan 4" , @"Jan 5" , @"Jan 6" , @"Jan 7" ] ] ;      [ self . barChart updateChartData : @ [ @ ( arc4random ( ) % 30 ) , @ ( arc4random ( ) % 30 ) , @ ( arc4random ( ) % 30 ) , @ ( arc4random ( ) % 30 ) , @ ( arc4random ( ) % 30 ) , @ ( arc4random ( ) % 30 ) , @ ( arc4random ( ) % 30 ) ] ] ; } else if ( [ self . title isEqualToString : @"Circle Chart" ] ) {      [ self . circleChart updateChartByCurrent : @ ( arc4random ( ) % 100 ) ] ; }

代理回调

Objective-C

1 2 3 4 5

#import "PNChart.h"   //For LineChart   lineChart . delegate = self ;

动画

默认绘制图表时使用动画，可以通过设置 displayAnimation = NO 来禁止动画。

Objective-C

1 2 3 4 5

#import "PNChart.h"   //For LineChart   lineChart . displayAnimation = NO ;

Objective-C

1 2 3 4 5 6 7 8 9

//For DelegateMethod   - ( 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 ) ; }   - ( void ) userClickedOnLinePoint : ( CGPoint ) point lineIndex : ( NSInteger ) lineIndex {      NSLog ( @"Click on line %f, %f, line index is %d" , point . x , point . y , ( int ) lineIndex ) ; }

开源协议

PNChart 在 MIT开源协议 下可以使用，也就是说，只要在项目副本中包含了版权声明和许可声明，用户就可以使用 PNChart 做任何想做的事情，而 PNChart 也无需承担任何责任。可以通过查看 LICENSE 文件来获取更多相关信息。

开源地址：https://github.com/kevinzhow/PNChart