iOS 图表 CorePlot 折线图实例 填充图实例
最近在搞数据展示，需要将数据用图表展示出来，结果还是没有达到自己理想的效果，先将自己的不完美版本，记录一下，直接贴出代码
detailViewController.h
#import <UIKit/UIKit.h>
#import "CorePlot-CocoaTouch.h"
@interface DetailsViewController : UIViewController<CPTPlotDataSource, CPTAxisDelegate>
{
CPTXYGraph *graph; //画板
CPTScatterPlot *dataSourceLinePlot;//线
NSMutableArray *dataForPlot1; //坐标数组
NSTimer *timer1; //定时器
int j;
int r;
int maxX;
int maxY;
int minX;
int minY;
}
@property (retain, nonatomic) NSMutableArray *dataForPlot1;
@property (strong, nonatomic) NSString *value;
@property (strong, nonatomic) NSString *key;
@property (strong, nonatomic) NSMutableArray *dataArray;
@property (strong, nonatomic) CPTXYGraph *graph;
@property (strong, nonatomic) NSMutableArray *points;
@property (strong, nonatomic) NSMutableArray *xArr;
@property (strong, nonatomic) NSMutableArray *yArr;
//折线图
-(void) lineChart;
//填充图
-(void) fillFigure;
@enddetailViewController.h（里面有两个函数，是分别调用折线图和填充图的）
#import "DetailsViewController.h"
@interface DetailsViewController ()
@end
@implementation DetailsViewController
@synthesize value;
@synthesize key;
@synthesize dataForPlot1;
@synthesize graph;
@synthesize points;
@synthesize yArr;
@synthesize xArr;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
//构造数据
self.points = [[NSMutableArray alloc] init];
NSUInteger i;
self.xArr = [[NSMutableArray alloc] init];
self.yArr = [[NSMutableArray alloc] init];
for(i=0;i<60;i++){
id x = [NSNumber numberWithFloat: 1+i*0.5];
id y = [NSNumber numberWithFloat: 1.2 * rand()/(float)RAND_MAX+1.2];
[self.xArr addObject:x];
[self.yArr addObject:y];
[self.points addObject:[NSMutableDictionary dictionaryWithObjectsAndKeys:x,@"x",y,@"y", nil]];
NSNumber *tmpX = [NSNumber numberWithFloat:[x intValue]];
NSNumber *tmpY = [NSNumber numberWithFloat:[y intValue]];
maxX = MAX([tmpX intValue], maxX);
minX = MIN([tmpX intValue], minX);
maxY = MAX([tmpY intValue], maxY);
minY = MIN([tmpY intValue], minY);
}
NSLog(@"maxX = %d",maxX);
NSLog(@"minX = %d",minX);
NSLog(@"maxY = %d",maxY);
NSLog(@"minY = %d",minY);
// NSLog(@"xArr = %@",self.xArr);
// NSLog(@"yArr = %@",self.yArr);
}
return self;
}
- (void)viewDidLoad{
[super viewDidLoad];
self.title = self.value;
[self lineChart];
}
//GridLine
-(void) gridLine{
}
//折线图
-(void) lineChart{
graph = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
CPTTheme *theme = [CPTTheme themeNamed:kCPTDarkGradientTheme];
[graph applyTheme:theme];
CPTGraphHostingView *hostingView = [[CPTGraphHostingView alloc] initWithFrame:self.view.bounds];
//设置图表的边框
//左边的padding设置为0
graph.paddingLeft = 0;
//顶部的的padding设置0
graph.paddingTop = 0;
//右边的padding设置为0
graph.paddingRight = 0;
//底部的padding设置为0
graph.paddingBottom = 0;
//坐标区域的边框设置
//左边的padding设置为45.0
graph.plotAreaFrame.paddingLeft = 40.0 ;
//顶部的padding设置为40.0
graph.plotAreaFrame.paddingTop = 10.0 ;
//右边的padding设置为5.0
graph.plotAreaFrame.paddingRight = 10.0 ;
//底部的padding设置为80.0
graph.plotAreaFrame.paddingBottom = 10.0 ;
hostingView.hostedGraph = graph;
//定义绘图空间
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *) graph.defaultPlotSpace;
plotSpace.allowsUserInteraction = NO;
//设置x，y坐标范围
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(minX) length:CPTDecimalFromFloat(maxX)];
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(minY) length:CPTDecimalFromFloat(maxY+2)];
//散点图的绘制
CPTScatterPlot *boundLinePlot = [[CPTScatterPlot alloc] init];
CPTMutableLineStyle *lineStyle = [CPTMutableLineStyle lineStyle];
lineStyle.miterLimit = 1.0f;
lineStyle.lineWidth = 3.0f;
lineStyle.lineColor = [CPTColor blueColor];
boundLinePlot.dataLineStyle = lineStyle;
boundLinePlot.identifier = @"lineChart";
boundLinePlot.dataSource = self;
[graph addPlot:boundLinePlot];
//设置坐标轴
CPTXYAxisSet *axisSet = (CPTXYAxisSet *) graph.axisSet;
CPTXYAxis *x = axisSet.xAxis;
x.majorIntervalLength = CPTDecimalFromString(@"10");
x.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
x.minorTicksPerInterval = 10;
// NSArray *xexclusionRanges = [NSArray arrayWithObjects:
// [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(1.99) length:CPTDecimalFromFloat(0.02)],
// [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.99) length:CPTDecimalFromFloat(0.02)],
// [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(2.99) length:CPTDecimalFromFloat(0.02)], nil];
// x.labelExclusionRanges = xexclusionRanges;
CPTXYAxis *y = axisSet.yAxis;
y.majorIntervalLength = CPTDecimalFromString(@"1");
y.orthogonalCoordinateDecimal = CPTDecimalFromString(@"1");
y.minorTicksPerInterval = 1;
[self.view addSubview:hostingView];
}
//填充图
-(void) fillFigure{
//创建图表
graph = [[CPTXYGraph alloc] initWithFrame:self.view.bounds];
//给图表添加一个主题
CPTTheme *theme = [CPTTheme themeNamed:kCPTDarkGradientTheme];
[graph applyTheme:theme];
//创建画板，将图表添加到画板
CPTGraphHostingView *hostingView = [[CPTGraphHostingView alloc] initWithFrame:self.view.bounds];
hostingView.hostedGraph = graph;
[self.view addSubview:hostingView];
//设置图表的边框
//左边的padding设置为0
graph.paddingLeft = 0;
//顶部的的padding设置0
graph.paddingTop = 0;
//右边的padding设置为0
graph.paddingRight = 0;
//底部的padding设置为0
graph.paddingBottom = 0;
//坐标区域的边框设置
//左边的padding设置为45.0
graph.plotAreaFrame.paddingLeft = 40.0 ;
//顶部的padding设置为40.0
graph.plotAreaFrame.paddingTop = 40.0 ;
//右边的padding设置为5.0
graph.plotAreaFrame.paddingRight = 15.0 ;
//底部的padding设置为80.0
graph.plotAreaFrame.paddingBottom = 80.0 ;
//设置坐标范围
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)graph.defaultPlotSpace;
plotSpace.allowsUserInteraction = YES;
// plotSpace.xRange = [CPTPlotRange ];
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0) length:CPTDecimalFromFloat(200.0)];
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0) length:CPTDecimalFromFloat(200.0)];
//设置坐标刻度大小
CPTXYAxisSet *axisSet = (CPTXYAxisSet *) graph.axisSet ;
CPTXYAxis *x = axisSet.xAxis ;
//x 轴：不显示小刻度线
x. minorTickLineStyle = nil ;
// 大刻度线间距： 50 单位
x. majorIntervalLength = CPTDecimalFromString (@"50");
// 坐标原点： 0
x. orthogonalCoordinateDecimal = CPTDecimalFromString ( @"0" );
CPTXYAxis *y = axisSet.yAxis ;
//y 轴：不显示小刻度线
y. minorTickLineStyle = nil ;
// 大刻度线间距： 50 单位
y. majorIntervalLength = CPTDecimalFromString ( @"50" );
// 坐标原点： 0
y. orthogonalCoordinateDecimal = CPTDecimalFromString (@"0");
//创建绿色区域
dataSourceLinePlot = [[CPTScatterPlot alloc] init];
dataSourceLinePlot.identifier = @"Green Plot";
//设置绿色区域边框的样式
CPTMutableLineStyle *lineStyle = [dataSourceLinePlot.dataLineStyle mutableCopy];
//设置线的宽度
lineStyle.lineWidth = 1.f;
//设置线的颜色
lineStyle.lineColor = [CPTColor greenColor];
//添加线到绿色区域中
dataSourceLinePlot.dataLineStyle = lineStyle;
//设置透明实现添加动画
dataSourceLinePlot.opacity = 0.0f;
//设置数据元代理
dataSourceLinePlot.dataSource = self;
//绿色区域添加到图表中
[graph addPlot:dataSourceLinePlot];
// 创建一个颜色渐变：从 建变色 1 渐变到 无色
CPTGradient *areaGradient = [ CPTGradient gradientWithBeginningColor :[CPTColor greenColor] endingColor :[CPTColor colorWithComponentRed:0.65 green:0.65 blue:0.16 alpha:0.2]];
// 渐变角度： -90 度（顺时针旋转）
areaGradient.angle = -90.0f ;
// 创建一个颜色填充：以颜色渐变进行填充
CPTFill *areaGradientFill = [ CPTFill fillWithGradient :areaGradient];
// 为图形设置渐变区
dataSourceLinePlot.areaFill = areaGradientFill;
dataSourceLinePlot.areaBaseValue = CPTDecimalFromString ( @"0.0" );
dataSourceLinePlot.interpolation = CPTScatterPlotInterpolationLinear ;
dataForPlot1 = [[NSMutableArray alloc] init];
// j = 200;
// r = 0;
// timer1 = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(dataOpt) userInfo:nil repeats:YES];
// [timer1 fire];
[self plotData];
}
//添加数据
-(void) plotData{
if ([dataSourceLinePlot.identifier isEqual:@"Green Plot"]) {
NSString *xp1 = [NSString stringWithFormat:@"%d",1];
NSString *yp1 = [NSString stringWithFormat:@"%d",10];
NSMutableDictionary *point1 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp1, @"x", yp1, @"y", nil];
[dataForPlot1 insertObject:point1 atIndex:0];
NSString *xp2 = [NSString stringWithFormat:@"%d",10];
NSString *yp2 = [NSString stringWithFormat:@"%d",25];
NSMutableDictionary *point2 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp2, @"x", yp2, @"y", nil];
[dataForPlot1 insertObject:point2 atIndex:1];
NSString *xp3 = [NSString stringWithFormat:@"%d",30];
NSString *yp3 = [NSString stringWithFormat:@"%d",15];
NSMutableDictionary *point3 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp3, @"x", yp3, @"y", nil];
[dataForPlot1 insertObject:point3 atIndex:2];
NSString *xp4 = [NSString stringWithFormat:@"%d",50];
NSString *yp4 = [NSString stringWithFormat:@"%d",80];
NSMutableDictionary *point4 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp4, @"x", yp4, @"y", nil];
[dataForPlot1 insertObject:point4 atIndex:3];
NSString *xp5 = [NSString stringWithFormat:@"%d",70];
NSString *yp5 = [NSString stringWithFormat:@"%d",60];
NSMutableDictionary *point5 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp5, @"x", yp5, @"y", nil];
[dataForPlot1 insertObject:point5 atIndex:4];
NSString *xp6 = [NSString stringWithFormat:@"%d",90];
NSString *yp6 = [NSString stringWithFormat:@"%d",100];
NSMutableDictionary *point6 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp6, @"x", yp6, @"y", nil];
[dataForPlot1 insertObject:point6 atIndex:5];
NSString *xp7 = [NSString stringWithFormat:@"%d",110];
NSString *yp7 = [NSString stringWithFormat:@"%d",70];
NSMutableDictionary *point7 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp7, @"x", yp7, @"y", nil];
[dataForPlot1 insertObject:point7 atIndex:6];
NSString *xp8 = [NSString stringWithFormat:@"%d",130];
NSString *yp8 = [NSString stringWithFormat:@"%d",80];
NSMutableDictionary *point8 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp8, @"x", yp8, @"y", nil];
[dataForPlot1 insertObject:point8 atIndex:7];
NSString *xp9 = [NSString stringWithFormat:@"%d",200];
NSString *yp9 = [NSString stringWithFormat:@"%d",135];
NSMutableDictionary *point9 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp9, @"x", yp9, @"y", nil];
[dataForPlot1 insertObject:point9 atIndex:8];
}
}
//使用CorePlot的委托方法 呈现图形 - lineChart
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot{
return [self.points count];
}
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index{
NSString *key = (fieldEnum == CPTScatterPlotFieldX ? @"x" : @"y");
NSNumber *num = [[self.points objectAtIndex:index] valueForKey:key];
return num;
}
//使用CorePlot的委托方法 呈现图形 - fillFigure
//-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot{
// return [dataForPlot1 count];
//}
//
//-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index{
// NSNumber *num;
// //让视图偏移
// if ( [(NSString *)plot.identifier isEqualToString:@"Green Plot"] ) {
// NSString *key = (fieldEnum == CPTScatterPlotFieldX ? @"x" : @"y");
//
// num = [[dataForPlot1 objectAtIndex:index] valueForKey:key];
// if ( fieldEnum == CPTScatterPlotFieldX ) {
// num = [NSNumber numberWithDouble:[num doubleValue] - r];
// }
// }
// //添加动画效果
// CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
// fadeInAnimation.duration = 1.0f;
// fadeInAnimation.removedOnCompletion = NO;
// fadeInAnimation.fillMode = kCAFillModeForwards;
// fadeInAnimation.toValue = [NSNumber numberWithFloat:2.0];
// [dataSourceLinePlot addAnimation:fadeInAnimation forKey:@"animateOpacity"];
// return num;
//}
- (void) dataOpt{
//添加随机数
if ([dataSourceLinePlot.identifier isEqual:@"Green Plot"]) {
NSString *xp = [NSString stringWithFormat:@"%d",j];
NSString *yp = [NSString stringWithFormat:@"%d",(rand()%100)];
NSMutableDictionary *point1 = [[NSMutableDictionary alloc] initWithObjectsAndKeys:xp, @"x", yp, @"y", nil];
[dataForPlot1 insertObject:point1 atIndex:0];
}
//刷新画板
[graph reloadData];
j = j + 20;
r = r + 20;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
版权声明
由 davidzhang创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于
博客（
https://www.gowhich.com ），版权所有，侵权必究。
本文永久链接： https://www.gowhich.com/blog/71
版权声明
由 davidzhang创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 Gowhich博客（ https://www.gowhich.com ），版权所有，侵权必究。
本文永久链接： https://www.gowhich.com/blog/71