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

时间: 05-09

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

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

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

Android画折线图、柱状图、饼图(使用achartengine.jar)

自从用了画折线的jar包之后,就不想再用canvas画布去画了,编程就是要站在巨人的肩膀上. 所需要的jar包achartenginejar 折线代码布局文件就不上传了很简单 另一种线的渲染器 扇形图代码 柱状图代码 属性总结部分代码 新测试代码下载地址 所需要的jar包:achartengine.jar 下载地址:http://download.csdn.net/detail/zhengyikuangge/9460642 折线代码(布局文件就不上传了,很简单): package com.exa

echarts入门基础,画折线图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ transform: translate(50%,50%); -webkit-transform: translate(-50%,-50%); -moz-transform: transla

matlab画折线图

y1 = [99.02,99.22,98.86]; y2 = [98.59,98.49,98.14]; plot(y1,'-b','LineWidth',1.5); %其中-b表示为蓝色,linewidth表示线的宽度为1.5 hold on; %在一次曲线结束后加上hold on 可以使得下一条曲线也出现在图上 plot(y2,'-g','LineWidth',1.5'); %-g表示绿色 set(gca,'xTick',1:3); %表示横坐标有三个值set(gca,'xTicklabel'

Android 用achartengine 画折线图怎么显示不正确

============问题描述============ X.Y的刻度值都是我自己定义的 显示的点的位置不正确 请问是什么原因 怎么处理  还有我设置了显示网格 为什么不显示了 Y轴不设置自己的定义的刻度值 但是刻度个数又不对 这种情况显示是正确的就是刻度个数不够 ============解决方案1============ 属性设置不对,找个demo仔细看看设置,看自己哪里设置不对. ============解决方案2============ 我以前整理的一个曲线图,我共享下,你下载看看,里面东

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

HighCharts绘制JS折线图(后台传数据给前台基于JFinal框架)

/*****************************Controller(基于JFinal框架)**************/ package com.zzu.controller;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.List;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilitie