IOS使用Core-Plot画折线图

关于Core-Plot的配置,大家可以参考我的上一篇博客:http://1.wildcat.sinaapp.com/?p=99

版权所有,转载请注明原文转自:http://blog.csdn.net/wildcatlele/article/details/25483923

大家可以到:http://1.wildcat.sinaapp.com/?p=102观看本篇博客更友好的排版格式

或者你英语好也可以参考github上的wiki介绍:https://code.google.com/p/core-plot/wiki/UsingCorePlotInApplications

先看一下效果图:

好了下面说说具体使用吧:

1.修改ViewController.h文件如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

//

//  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"

@interface ViewController : UIViewController<CPTPlotDataSource>

@property (nonatomic, strong) CPTGraphHostingView *hostView;

@end

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

-(void)viewDidAppear:(BOOL)animated
{

[super
viewDidAppear:animated];

[self
initPlot];

}

#pragma mark - Chart behavior

-(void)initPlot
{

[self
configureHost];

[self
configureGraph];

[self
configurePlots];

[self
configureAxes];

}

-(void)configureHost
{

}

-(void)configureGraph
{

}

-(void)configurePlots
{

}

-(void)configureAxes
{

}

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 各种对象之间的关系。

IOS使用Core-Plot画折线图,布布扣,bubuko.com

时间: 2024-10-13 21:24:27

IOS使用Core-Plot画折线图的相关文章

IOS使用CGContextRef动态画折线图

- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextClearRect(context, rect); CGContextSetLineWidth(context, _lineWidth); //设置画笔宽度 CGContextSetFillColorWithColor(context, [[self backgroundColor] CGColor]); /

python中matplotlib画折线图实例(坐标轴数字、字符串混搭及标题中文显示)

最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指正. 一.最简单的基本框架如下:已知x,y,画出折线图并保存.此时x和y均为数字. 1 # -*- coding: utf-8 -*- 2 3 import matplotlib.pyplot as plt #引入matplotlib的pyplot子库,用于画简单的2D图 4 import random 5

iOS 使用 Core Plot 绘制统计图表入门

本文转载至 http://blog.csdn.net/zhibudefeng/article/details/7677457 iOS(iPhone/iPad) 下图形组件有两个有名的,s7graphview 和 Core Plot,它们都是在 Google 上托管的代码,听说 Core Plot 比较强,因为前者仅支持曲线图,后者呢曲线图.饼图.柱状图等通吃,且较活跃.那就专注下 Core Plot 的使用.它提供了 Mac OS X 和 iOS 下的组件库,我只用到它的 iOS 图表库. Co

Java画折线图

??? JFreeChart 是开放源代码站点SourceForge.net 上的一个 JAVA 项目,它主要用来各种各样的图表,这些图表包括:饼图.柱状图 ( 普通柱状图以及堆栈柱状图 ).线图.区域图.分布图.混合图.甘特图以及一些仪表盘等等. ??? 应用jfreechart来画图需要两个jar包:jfreechart.jar和jcommon.jar,直接去官网下载就成: https://sourceforge.net/projects/jfreechart/files/ ?? 下载完成后

Matplotlib学习---用matplotlib画折线图(line chart)

这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevdp/data-CDCbirths/master/births.csv 准备工作:先导入matplotlib和pandas,用pandas读取csv文件,然后创建一个图像和一个坐标轴 import pandas as pd from matplotlib import pyplot as plt birth=p

Cocos2d3.0 画折线图

实现用2dx画折线图,为以后用2dx开发应用做准备 下面记录下使用方法 auto lineView = DJLineChart::create(); std::vector<float> vec; vec.push_back(130); vec.push_back(520); vec.push_back(60); vec.push_back(0); vec.push_back(140); vec.push_back(100); vec.push_back(30); vec.push_back(

unity 画折线图,饼型图插件

在unity中画折线图,和饼型图等数据分析图是很困难 的一件事,幸好我找到了一个插件很方便的解决了这件事,效果如下图: 折线图,饼型图,等. 运行效果如下: 百度网盘下载地址:链接:https://pan.baidu.com/s/10oLG1Zmffv7ASWG0pvx05w 提取码:lub1 如果链接失效,请留言. 原文地址:https://blog.51cto.com/14058389/2425723

gnuplot画折线图

之前尝试用jfreechart画自定义横坐标的折线图或时序图,发现很复杂,后来改用gnuplot了. gnuplot在网上一搜就能找到下载地址. 安装完成后,主要是命令行形式的交互界面,至少比jfreechart进步一些... set xrange [0:240]  #设置x轴范围 set yrange [1:1.5]  #设置y轴范围 set xtics ("0" 0, "60" 60, "120" 120, "180" 1

python的turtle模块画折线图

代码如下: import turtle yValues = [10.0,7.4,6.4,5.3,4.4,3.7,2.6] def main(): t = turtle.Turtle() t.hideturtle() drawLine(t,0,0,300,0) #画x轴 drawLine(t,0,0,0,175) #画y轴 #画折线 for i in range(6): drawLineWithDots(t,40 + (40 * i),15 * yValues[i],40 + (40 * (i+1