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 文件夹到你的工程中。
使用
|
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
]
;
|
|
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
]
;
|
|
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
]
;
|
|
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
]
;
|
|
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 允许在折线图和饼状图中添加图例，图例可以竖向堆叠布置或者横向并列布置。
|
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
]
;
|
更新数据
实时更新数据也非常简单。
|
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
)
]
;
}
|
代理回调
|
1
2
3
4
5
|
#import "PNChart.h"
//For LineChart
lineChart
.
delegate
=
self
;
|
动画
默认绘制图表时使用动画，可以通过设置 displayAnimation = NO 来禁止动画。
|
1
2
3
4
5
|
#import "PNChart.h"
//For LineChart
lineChart
.
displayAnimation
=
NO
;
|
|
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