CorePlot1.0:折线图

我们先来介绍Core Plot中最简单的图形：折线图。折线图也叫散点图，图形由一个个的数据点和点之间的连接线段构成。

新建Single View Application。使用前面介绍的4个步骤将 Core Plot 框架加到项目中。

打开ViewController.xib，将 View 对象的Identifier改为 CPTGraphHostingView。

要使用CorePlot，我们还必须在头文件中导入 “CorePlot-CocoaTouch.h”。然后在ViewController.h文件中声明一个 CPTXYGraph类型的成员：

CPTXYGraph *graph;

我们将使用这个CPTXYGraph对象来显示一张空白的图纸。这很容易做到，在viewDidLoad方法中使用如下代码：

graph = [[CPTXYGraph alloc] initWithFrame:CGRectZero];

CPTTheme *theme = [CPTThemethemeNamed:kCPTDarkGradientTheme];

[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坐标轴。

运行程序，我们可以看到程序运行的效果，如图所示。当然，我们还做了一些额外的工作，比如在数据点上绘制了一个蓝色圆圈，在折线下方显示了一个渐变色层等等。