Core Plot绘制——折线图篇

最新推荐文章于 2024-09-21 18:24:29 发布

原创最新推荐文章于 2024-09-21 18:24:29 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

IOS中级专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用Core Plot在iPad上创建实时数据图表，特别是折线图的绘制过程。从创建底板、设置画布，到调整画布参数、设置坐标轴，直至最终绘制折线和转折点，详细讲解了使用Core Plot实现专业图表的步骤。

	开篇介绍一下有关ipad上数据的绘制的一下了解。然后，后边会陆续介绍饼图，柱状图，动态这线图的相关画法。

ipad现在功能不仅仅局限于娱乐，而且转消费力为生产力的工具，我们可以用iipad现实实时的数据，处理一些复杂的图标。然而光用apple的open gl／se，我感觉实在有点难为人，但是Core Plot的出现改变了现在这种情况，下边就安装，使用Core Plot做介绍，开篇做简单的折线图绘制。先来张框架图做小小预习。

2:使用篇：

1:创建底板；

self.hostingView = [[CPTGraphHostingView alloc] initWithFrame:CGRectMake(20, 20, 984, 664)];
    self.hostingView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:self.hostingView];

2:设置画布（不专业的叫法叫画布）

（1）首先要把花布设置到底板上

    self.hostingView.hostedGraph = self.graph;

（2）设置画布相关参数

设置主题

    CPTTheme *theme = [CPTTheme themeNamed:kCPTSlateTheme];
    [self.graph applyTheme:theme];

设置画板四周的距离

    self.graph.paddingLeft = 50;
    self.graph.paddingRight = 50;
    self.graph.paddingTop = 50;
    self.graph.paddingBottom = 50;

设置画板绘制区域距离四周的距离（这个与上面的距离不明白的可以在程序里面测试一下，你就明白了）

    self.graph.plotAreaFrame.paddingLeft = 50;
    self.graph.plotAreaFrame.paddingRight = 30;
    self.graph.plotAreaFrame.paddingTop = 30;
    self.graph.plotAreaFrame.paddingBottom = 45;

获取绘图空间

    CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)self.graph.defaultPlotSpace;

绘图空间的相关设置（代理要设置，）

    plotSpace.allowsUserInteraction = YES;
    plotSpace.delegate = self;
    //设置坐标系的的最大显示范围
    plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0) length:CPTDecimalFromFloat(300.0)];
    plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.5) length:CPTDecimalFromFloat(12.0)];
    
    plotSpace.globalXRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0) length:CPTDecimalFromFloat(300.0)];
    plotSpace.globalYRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.5) length:CPTDecimalFromFloat(24.0)];

坐标轴的相关设置，

获取坐标集合

   CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.graph.axisSet;

获取X坐标轴集合

   CPTXYAxis *x = axisSet.xAxis;

X坐标轴相关设置

    x.majorIntervalLength = CPTDecimalFromString(@"1");//最大刻度的间距
    x.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");//x轴在y轴的位置
    x.minorTicksPerInterval = 10;//显示子刻度个数
    
    NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init];
    [numberFormatter setNumberStyle:NSNumberFormatterDecimalStyle];
    [numberFormatter setMaximumFractionDigits:0];
    //X轴上数据显示格式
    x.labelFormatter = numberFormatter;
    //X轴下方标题
    x.title = @"统计次数";
    x.titleOffset = 20.5f;//文字距离坐标轴的便宜量
    CPTMutableTextStyle *titleTs = [CPTMutableTextStyle textStyle];
    titleTs.color = [CPTColor whiteColor];
    titleTs.fontSize = 17;
    
    x.titleTextStyle = titleTs;
    //坐标轴剪头相关设置
    CPTLineCap *lineCap = [CPTLineCap solidArrowPlotLineCap];
    lineCap.size = CGSizeMake(15, 15);
    lineCap.lineStyle = x.axisLineStyle;
    lineCap.fill = [CPTFill fillWithColor:[CPTColor greenColor]];
    //设置到坐标轴
    x.axisLineCapMax = lineCap;

y周同理，直接上代码

	CPTXYAxis *y = axisSet.yAxis;
	y.majorIntervalLength	      = CPTDecimalFromString(@"50");
	y.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0.5");
    y.minorTicksPerInterval       = 2;
    y.title                       = @"万元";
	y.titleOffset                 = 5.0f;
	y.titleLocation               = CPTDecimalFromFloat(309.0f);
    y.titleRotation               = degreesToRadians(0.0);
    y.titleTextStyle = titleTS;
    CPTLineCap *lineCapy  = [CPTLineCap hexagonPlotLineCap];
    lineCapy.size = CGSizeMake(15.0, 15.0);
    lineCapy.lineStyle    = x.axisLineStyle;
    lineCapy.fill         = [CPTFill fillWithColor:[CPTColor redColor]];
    y.axisLineCapMax      = lineCapy;
    
    lineCapy              = [CPTLineCap rectanglePlotLineCap];
    lineCapy.size         = CGSizeMake(12.0, 12.0);
    lineCapy.lineStyle    = x.axisLineStyle;
    lineCapy.fill         = [CPTFill fillWithColor:[CPTColor greenColor]];
    y.axisLineCapMin      = lineCapy;

绘制折线

绘制折线图的转折点

    //转折点的外部描绘
    CPTMutableLineStyle *symbols = [CPTMutableLineStyle lineStyle];
    symbols.lineColor = [CPTColor yellowColor];
    symbols.lineWidth = 2.0f;
    //转折点的描绘
    CPTPlotSymbol *plotSymbol = [CPTPlotSymbol ellipsePlotSymbol];
    plotSymbol.fill = [CPTFill fillWithColor:[CPTColor purpleColor]];
    plotSymbol.lineStyle = symbols;
    plotSymbol.size = CGSizeMake(10, 10);

绘制折线对象

    //创建折线对象
    self.boundLinePlot = [[CPTScatterPlot alloc] init];
    //折线标识符
    self.boundLinePlot.identifier = @"lineOne";
    //设置转折点到线上
    self.boundLinePlot.plotSymbol = plotSymbol;
    //设置折线对象的数据源，需要写协议
    self.boundLinePlot.dataSource = self;
    
    //设置折线对象到画板
    [self.graph addPlot:self.boundLinePlot];
    //设置转折点的代理
    self.boundLinePlot.delegate = self;
    //设置转折点的点击区域
    self.boundLinePlot.plotSymbolMarginForHitDetection = 15.0f;
    //设置折线对象的连接样式
    self.boundLinePlot.interpolation = CPTScatterPlotInterpolationCurved;

强大的Core Plot给我带来了自动布局

    //绘图空间会根据数据的内容，去调整页面的显示
    [plotSpace scaleToFitPlots:[self.graph allPlots]];