IOS使用Core-Plot畫折線圖
阿新 • • 發佈：2019-01-24
先看一下效果圖：
好了下面說說具體使用吧：
1.修改ViewController.h檔案如下：
| 12345678910111213 | //// ViewController.h// CorePlotDemo//// Created by wildcat on 14-5-9.// Copyright (c) 2014年 com.wildcat. All rights reserved.//#import <UIKit/UIKit.h>#import "CorePlot-CocoaTouch.h"@interfaceViewController:UIViewController& |
2.在.m檔案中的implement下面新增
| 1 | @synthesizehostView=hostView_; |
3.在下面接著新增幾個方法
| 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 |
#pragma mark - UIViewController lifecycle methods |
4.在@end上邊新增
#pragma mark - CPTPlotDataSource methods
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot{
return0;
}
-(NSNumber *)numberForPlot:(CPTPlot *)plotfield:(NSUInteger)fieldEnumrecordIndex:(NSUInteger)index{
return[NSDecimalNumberzero];
}5.新增下面程式碼到-(void)configureHost函式：
self.hostView=[(CPTGraphHostingView *)[CPTGraphHostingViewalloc]initWithFrame:CGRectMake(0,10,self.view.bounds.size.width-10,self.view.bounds.size.height/2)];
self.hostView.allowPinchScaling=YES;
[self.viewaddSubview:self.hostView];以上程式碼的主要作用就是宣告一個檢視用於繪圖，下面的折線圖將繪製到這個檢視上，然後新增為self.view的子檢視。
6.新增下面程式碼到configureGraph:
//create an CPXYGraph and host it inside the view
CPTTheme *theme=[CPTThemethemeNamed:kCPTPlainWhiteTheme];
CPTXYGraph *graph=(CPTXYGraph *)[themenewGraph];
graph.paddingLeft=10.0;
graph.paddingTop=10.0;
graph.paddingRight=10.0;
graph.paddingBottom=10.0;
self.hostView.hostedGraph=graph;
CPTXYPlotSpace *plotSpace2=(CPTXYPlotSpace *)graph.defaultPlotSpace;
//一屏內可顯示的x，y方向的量度範圍
plotSpace2.xRange=[CPTPlotRangeplotRangeWithLocation:CPTDecimalFromCGFloat(-0.6)
length:CPTDecimalFromCGFloat(6.0)];
plotSpace2.yRange=[CPTPlotRangeplotRangeWithLocation:CPTDecimalFromCGFloat(-1.0)
length:CPTDecimalFromCGFloat(10.0)];
plotSpace2.allowsUserInteraction=YES;7.新增下面程式碼到configurePlots:
// 1 - Get graph and plot space
CPTGraph *graph = self.hostView.hostedGraph;
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *) graph.defaultPlotSpace;
//2:建立線性
CPTMutableLineStyle *lineStyle=[CPTMutableLineStyle lineStyle];
lineStyle.miterLimit = 1.0f;
lineStyle.lineWidth = 3.0f;
lineStyle.lineColor = [CPTColor blueColor];
//3.設定資料點
CPTScatterPlot * lowScatterPlot = [[CPTScatterPlot alloc] init];
lowScatterPlot.dataLineStyle = lineStyle;
lowScatterPlot.identifier = @"LOWER";
lowScatterPlot.dataSource = self; //設定資料來源
[graph addPlot:lowScatterPlot toPlotSpace:plotSpace];
//....
CPTScatterPlot * highScatterPlot = [[CPTScatterPlot alloc] init];
highScatterPlot.dataLineStyle = lineStyle;
highScatterPlot.identifier = @"HIGH";
highScatterPlot.dataSource = self;
[graph addPlot:highScatterPlot toPlotSpace:plotSpace];
//4.設定顯示區域，滑動到資料點處
[plotSpace scaleToFitPlots:[NSArray arrayWithObjects:lowScatterPlot,highScatterPlot, nil]];
CPTMutablePlotRange *xRange = [plotSpace.xRange mutableCopy];
[xRange expandRangeByFactor:CPTDecimalFromCGFloat(1.1f)];
plotSpace.xRange = xRange;
CPTMutablePlotRange *yRange = [plotSpace.yRange mutableCopy];
[yRange expandRangeByFactor:CPTDecimalFromCGFloat(1.2f)];
plotSpace.yRange = yRange;
//5.設定折線
CPTMutableLineStyle *lowLineStyle = [lowScatterPlot.dataLineStyle mutableCopy];
lowLineStyle.lineWidth = 2.0f; //折線寬度
lowLineStyle.lineColor = [CPTColor blueColor]; //折線顏色
lowScatterPlot.dataLineStyle = lowLineStyle; //設定資料線樣式
CPTMutableLineStyle *lowSymbolLineStyle = [CPTMutableLineStyle lineStyle];
lowSymbolLineStyle.lineColor = [CPTColor blueColor];
//...
CPTMutableLineStyle *highLineStyle = [lowScatterPlot.dataLineStyle mutableCopy];
highLineStyle.lineWidth = 2.0f; //折線寬度
highLineStyle.lineColor = [CPTColor redColor]; //折線顏色
highScatterPlot.dataLineStyle = highLineStyle; //設定資料線樣式
CPTMutableLineStyle *highSymbolLineStyle = [CPTMutableLineStyle lineStyle];
highSymbolLineStyle.lineColor = [CPTColor redColor];
//6.設定拐點
CPTPlotSymbol *lowSymbol = [CPTPlotSymbol ellipsePlotSymbol];
lowSymbol.fill = [CPTFill fillWithColor:[CPTColor blueColor]];
lowSymbol.lineStyle = lowSymbolLineStyle;
lowSymbol.size = CGSizeMake(6.0f, 6.0f); //拐點大小
lowScatterPlot.plotSymbol = lowSymbol;
CPTPlotSymbol *highSymbol = [CPTPlotSymbol ellipsePlotSymbol];
highSymbol.fill = [CPTFill fillWithColor:[CPTColor redColor]];
highSymbol.lineStyle = highSymbolLineStyle;
highSymbol.size = CGSizeMake(6.0f, 6.0f); //拐點大小
highScatterPlot.plotSymbol = highSymbol;以上程式碼主要是設定折線、拐點的型別以及設定高低溫兩個折線圖.最重要的是新增資料來源 .dataSource = self;
8.設定x、y軸的間隔及細分刻度等，新增以下程式碼到configureAxes函式：
CPTGraph *graph=self.hostView.hostedGraph;
//1:建立線性
CPTMutableLineStyle *lineStyle=[CPTMutableLineStylelineStyle];
//axes 設定x,y軸屬性，如原點。
//得到x，y軸的集合
CPTXYAxisSet *axisSet=(CPTXYAxisSet *)graph.axisSet;
lineStyle.miterLimit=1.0f;
lineStyle.lineWidth=0.5f;
lineStyle.lineColor=[CPTColorblueColor];
//設定x軸線
CPTXYAxis *x=axisSet.xAxis;
x.orthogonalCoordinateDecimal=CPTDecimalFromString(@"0");//原點為0.(y=0）
x.majorIntervalLength=CPTDecimalFromString(@"1");// x軸主刻度：顯示數字標籤的量度間隔
x.minorTicksPerInterval=0;// x軸細分刻度：每一個主刻度範圍內顯示細分刻度的個數
x.minorTickLineStyle=lineStyle;
//設定y 軸
CPTXYAxis *y=axisSet.yAxis;
y.orthogonalCoordinateDecimal=CPTDecimalFromString(@"0");
y.majorIntervalLength=CPTDecimalFromString(@"1");
y.minorTicksPerInterval=0;
y.minorTickLineStyle=lineStyle;9.設定資料來源方法，修改兩個方法如下：
#pragma mark - CPTPlotDataSource methods
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot {
return 4; //資料點個數
}
static int a=1;
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index {
switch (fieldEnum) {
case CPTScatterPlotFieldX:
if (a>4) {
a=1;
}
return [NSNumber numberWithInt:a++];
break;
case CPTScatterPlotFieldY:
if ([plot.identifier isEqual:@"LOWER"] == YES) {
return [NSNumber numberWithInt:arc4random()%8];
}else if([plot.identifier isEqual:@"HIGH"] == YES){
return [NSNumber numberWithInt:arc4random()%8+10];
}
break;
}
return [NSDecimalNumber zero];
}
好了一切設定完畢執行看看效果。
補充：
Core Plot 框架結構分析
CorePlot 的類結構關係如下：
其中最核心的就是 CPTGraph，本示例中的 CPTXYGraph是它的子類；一個圖 CPTGraph包含一個軸集 CPTAxiset，每個軸集可包含多個軸；一個圖 CPTGraph 可包含多個圖空間 CPTPlotSpace；一個圖 CPTGraph 可包含多個圖形CPTSplot（曲線，餅圖，柱狀圖等）；圖形CPTSplot 和軸都展現在某個圖空間 CPTPlotSpace 中。其餘的部分，尚未介紹到，暫且不提。
也許下圖能更形象地描述出 Core Plot 各種物件之間的關係。
