原文来源:http://blog.csdn.net/kmyhy/article/details/7819661
其他例子:
http://hi.baidu.com/ljlkings/item/ad3cbe8c4742ecc9ee083d5e
我们先来介绍Core Plot中最简单的图形:折线图。折线图也叫散点图,图形由一个个的数据点和点之间的连接线段构成。
新建Single View Application。使用官网步骤将 Core Plot 框架加到项目中。
下载地址 https://code.google.com/p/core-plot/downloads/list
利用静态编译的方法
编译好的静态库(.a文件),你要以静态库的方式链接到工程中。新建项目,执行以下步骤:
1、将解压缩目录中“Binaries/iOS/CorePlotHeaders”目录下的所有头文件拖到你的Xcode项目中。
2、将 .a 文件拖到你的项目中。
3、在Target的Build Settings设置中,找到Other Linker Flags,加入“ObjC -all_load”。
4、往工程中加入QuartzCore框架。
注意:如果你在编译项目时遇到错误“Command/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/clang failed with exitcode 1”,请将 Scheme 从 iOS Device 改为 iPhone 5.0 Simulator。或者将Compiler for C/C++ 改为LLVM GCC 4.2。同时,Core Plot 1.0 不再支持老的 armv6 CPU。
打开ViewController.xib,将 View 对象的Identifier改为 CPTGraphHostingView。
要使用CorePlot,我们还必须在头文件中导入 “CorePlot-CocoaTouch.h”。然后在ViewController.h文件中声明一个 CPTXYGraph类型的成员:
CPTXYGraph *graph;
我们将使用这个CPTXYGraph对象来显示一张空白的图纸。这很容易做到,在viewDidLoad方法中使用如下代码:
graph = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
CPTTheme *theme = [CPTThemethemeNamed:kCPTStocksTheme];
[graph applyTheme:theme];
CPTGraphHostingView *hostingView = (CPTGraphHostingView*)self.view;
hostingView.hostedGraph = graph;
注意,我们代码的第2句,我们使用了一个名为kCPTDarkGradientTheme的CPTTheme来作为图表的主题。主题定义了图表的背景色和坐标轴样式。框架默认提供了 5 种样式,分别用字符串常量 kCPTDarkGradientTheme、kCPTPlainBlackTheme、kCPTPlainWhiteTheme、kCPTSlateTheme和 kCPTStocksTheme 来指定。如果你嫌这些样式不够,你可以定义自己的样式(后面介绍)。
第3句代码,则是将主题应用于图表。当然,你也可以不在图表上使用任何主题,这样的话你可能无法看到坐标系。因为默认的背景色和坐标轴同为黑色。
第4句代码,是将self.view转换为一个CPTGraphHostingView对象(本来就是,因为我们在ViewController.xib中设置过了)。
最后一句代码,将应用了主题的CPTXYGraph对象放到CPTGraphHostingView上,以便图表能够绘制在窗体中。
现在运行程序,将显示一张黑色背景的空白图表。
我们先来构造一些数据,以便显示为散点图的形式。先在ViewController的头文件中声明一个可变数组:
NSMutableArray* points;
然后在ViewController的initWithNibName方法中,采用随机数初始化数组:
points=[[NSMutableArrayalloc]init];
NSUInteger i;
for ( i = 0; i < 60; i++ ) {
id x = [NSNumber numberWithFloat:1 +i * 0.05];
id y = [NSNumber numberWithFloat:1.2* rand() / (float)RAND_MAX + 1.2];
[pointsaddObject:[NSMutableDictionary dictionaryWithObjectsAndKeys:x, @"x",y, @"y", nil]];
}
在viewDidLoad方法中,我们绘制散点图。在开始绘图之前,必须先定义绘图空间(CPTPlotSpace)。图形空间其实是图形在图纸上的二维坐标空间,对于一个图形都有一个自己的坐标空间,比如(1,1)在某个位置,(2,-1)在某个位置。每个图纸(CPTGraph)起码有一个图形空间(defaultPlotSpace)。如果图纸上有多个图形,这些图形则可能采用不同的图形空间,那么图纸就可能有不止一个的图形空间存在。图形空间的坐标和设备空间的坐标不是一回事。CPTPlotSpace类自身有一系列的方法用于在二者间转换。
对于图形空间来说,最重要的事情莫过于设置x,y坐标的可见范围:从一个点开始,显示坐标轴上一段固定的长度。当然这只是说坐标轴一开始的样子。因为坐标轴是无限数轴,通过在屏幕上拖动,你可以滑动坐标轴。但不管怎么说,你能同时看到的坐标轴长度总是固定(不缩放的情况下)。
CPTXYPlotSpace *plotSpace =(CPTXYPlotSpace *)graph.defaultPlotSpace;
plotSpace.allowsUserInteraction= YES;
// 设置x,y坐标范围
plotSpace.xRange =[CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(1.0)length:CPTDecimalFromFloat(2.0)];
plotSpace.yRange =[CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(1.0)length:CPTDecimalFromFloat(3.0)];
然后才是散点图的绘制。在Core Plot中,散点图使用CPTScatterPlot类。散点图主要是由线段组成,因此线段的Style(线型)就非常重要。CPTLineStyle是用于描述线型的数据结构,但它是只读的,要想修改线段的Style,我们必须使用它的可变形式CPTMutableLineStyle。通过CPTMutableLineStyle,我们可以修改线段的粗细、颜色、尖角限制。
CPTScatterPlot*boundLinePlot = [[[CPTScatterPlotalloc] init] autorelease];
CPTMutableLineStyle*lineStyle = [CPTMutableLineStyle lineStyle];
lineStyle.miterLimit = 1.0f;
lineStyle.lineWidth = 3.0f;
lineStyle.lineColor = [CPTColor blueColor];
所谓尖角限制就是两个线段连接处的肘部。尖角限制的算法在不同的系统有不同的解释,总的来说是把尖角从底到顶尖处横向等分为4份,尖角限制为几,我们就保留几份,剩下的部分截去。但是在有的系统里,尖角的计算方式是从线段下端算起(比如Illustrate),有的系统则是把尖角下端从线段的中心线算起。假设CorePlot是使用第二种,则尖角限制可以用下图表示:
然后将散点图的线型设置为CPTMutableLineStyle对象。设置散点图的数据源属性(dataSource),最后才将散点图对象加入到图纸中,就像我们使用UIView addSubview 一样:
boundLinePlot.dataLineStyle= lineStyle;
boundLinePlot.identifier = @"Blue Plot";
boundLinePlot.dataSource = self;
[graphaddPlot:boundLinePlot];
仅仅是将散点图的dataSource指定为 self 并不会绘制图形,还需要 self 去实现 CPTPlotDataSource 委托。跟UITableView需要ViewController实现UITableViewDataSource委托一样,CPTPlot 需要数据源实现 CPTPlotDataSource 委托才能呈现数据。首先在头文件中声明对CPTPlotDataSource 委托的实现,然后在implementation 中实现两个委托方法
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot*)plot
{
return[points count];
}
要想绘制散点图,起码要知道需要画几个点吧?CorePlot 通过调用数据源对象(这里是self)的numberOfRecordsForPlot:方法来获取散点图数据点数。
-(NSNumber*)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnumrecordIndex:(NSUInteger)index
{
NSString*key = (fieldEnum == CPTScatterPlotFieldX ? @"x" : @"y");
NSNumber*num = [[points objectAtIndex:index] valueForKey:key];
returnnum;
}
此外,CorePlot还需要知道每个数据点的具体值(x,y)。数据源对象可以用多个委托方法(self)来通知数据点的值,但numberForPlotv:field:recordIndex:方法是最常见的。CorePlot通过该方法的三个参数来查询数值。第1个参数指定要绘制的图形对象(CPTPlot),第2个参数指定当前正在绘制的点的字段名(代表x坐标或y坐标),第3个参数表示正在绘制第几个点。
有了这些参数,我们自然可以返回数据源中对应的点的值。在我们的数据源points数组中,每个点由两个字段“x”和“y”构成。我们根据方法的第2个参数返回x和y坐标。
运行程序。现在,我们散点图终于可以显示了。但很遗憾,我们仍然看不见坐标轴。这并不是我们想要的样子,我们还需要对坐标轴进行一些设置,让它显示出来:
CPTXYAxisSet*axisSet = (CPTXYAxisSet *)graph.axisSet; //1
CPTXYAxis*x = axisSet.xAxis; //2
x.majorIntervalLength=CPTDecimalFromString(@"0.5"); //3
x.orthogonalCoordinateDecimal= CPTDecimalFromString(@"2"); //4
x.minorTicksPerInterval = 2; //5
NSArray*exclusionRanges = [NSArray arrayWithObjects:
[CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(1.99)length:CPTDecimalFromFloat(0.02)],
[CPTPlotRangeplotRangeWithLocation:CPTDecimalFromFloat(0.99)length:CPTDecimalFromFloat(0.02)],
[CPTPlotRangeplotRangeWithLocation:CPTDecimalFromFloat(2.99)length:CPTDecimalFromFloat(0.02)], nil]; //6
x.labelExclusionRanges= exclusionRanges; //7
代码说明:
1、获取图纸对象的坐标系;
2、获取坐标系的x轴坐标;
3、设置大刻度线的间隔为0.5 个单位;
4、设置x坐标的原点(y轴将在此与x轴相交);
5、设置小刻度线的间隔为每两个大刻度线之间分布有2个小刻度线;
6、7、这两句将x轴上的某些点排除(即既不显示数字也不显示刻度线)。
接下来y轴也做同样事情(把上面的代码复制一遍再略做修改),只不过这次我们设置的是坐标系的y坐标轴。
运行程序,我们可以看到程序运行的效果,如图所示。当然,我们还做了一些额外的工作,比如在数据点上绘制了一个蓝色圆圈,在折线下方显示了一个渐变色层等等。