IOS_使用CorePlot实现曲线图（可交互）

最新推荐文章于 2024-05-10 09:49:56 发布

mark_AI+

最新推荐文章于 2024-05-10 09:49:56 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： IOS技术文章标签： iOS CorePlot 手势

本文链接：https://blog.youkuaiyun.com/mark_creative/article/details/9768827

IOS技术专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何使用CorePlot库在iOS应用中创建可交互的曲线图，详细讲解了交互功能的实现，提供了工程目录结构和代码运行效果的展示，适合希望深入学习CorePlot和图形交互的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是来自本群【小七_IOS_太原】的力作，感谢小七的分享

看上这位技术达人可以联系Email：jiangzhoubai@gmail.com

最明显的地方附上Demo下载地址

工程目录结构：

代码运行效果如下：

核心代码：

  CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *) self.graph.defaultPlotSpace;
    // 创建坐标轴
    CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.graph.axisSet;
    CPTXYAxis *x          = axisSet.xAxis;
    {
        x.labelingPolicy=CPTAxisLabelingPolicyAutomatic;  //自动计算拖动后的 刻度
        x.orthogonalCoordinateDecimal=CPTDecimalFromInt(0); //从0开始 即：交叉点
        x.minorTicksPerInterval=4;  //一个大的间隔里有几个小的间隔
        //x.majorIntervalLength         = CPTDecimalFromInteger(1); // 因为用了自动计算 所以这个不起作用 这个代表一个大的间隔的值
        x.majorGridLineStyle = self.majorGridLineStyle;
        //x轴 显示到指定的刻度
        x.visibleRange   = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(25.0f)];
        x.gridLinesRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(15.0f)];
        //        设置x轴格式化
        //        LabelNumberFormatter *labelFormatter=[[LabelNumberFormatter alloc]init];
        //        [labelFormatter setChartData:self.chartData];
        //        x.labelFormatter = labelFormatter;
        x.labelFormatter=self.defaultNumberFormat;
        x.labelTextStyle = titleTextStyle;
        x.plotSpace = plotSpace;
    }
    
    CPTXYAxis *y = axisSet.yAxis;
    {
        y.majorIntervalLength         = CPTDecimalFromFloat(1.0f);
        y.minorTicksPerInterval       = 0;
        y.orthogonalCoordinateDecimal = CPTDecimalFromFloat(-1.0f);
        y.majorGridLineStyle          = self.majorGridLineStyle;
        y.visibleRange   = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(15.0f)];
        y.gridLinesRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(-1.0f) length:CPTDecimalFromFloat(25.0f)];
        
        y.labelFormatter=self.defaultNumberFormat;
        y.labelTextStyle = titleTextStyle;
        y.plotSpace = plotSpace;
    }
    //添加 x/y 轴
    self.graph.axisSet.axes = @[x,y];
    
    // 创建折线样式
    CPTMutableLineStyle *lineStyle = [[CPTMutableLineStyle alloc] init];
    lineStyle.lineWidth              = 2.0;
    lineStyle.lineColor              = [CPTColor greenColor];
    
    //创建折线
    CPTScatterPlot *plot =[self addScatterPlot:@"coreplot simple" lineStyle:lineStyle dataSource:self];
    //设置填充颜色
    CPTColor *areaColor       = [CPTColor colorWithComponentRed:1.0 green:1.0 blue:1.0 alpha:0.6];
    CPTGradient *areaGradient = [CPTGradient gradientWithBeginningColor:areaColor endingColor:[CPTColor clearColor]];
    areaGradient.angle = -90.0f;
    CPTFill *areaGradientFill = [CPTFill fillWithGradient:areaGradient];
    plot.areaFill      = areaGradientFill;
    plot.areaBaseValue = CPTDecimalFromDouble(0.0);
    
    // 添加折线点的提示 就是蓝色的小点点
    CPTMutableLineStyle *symbolLineStyle = [CPTMutableLineStyle lineStyle];
    symbolLineStyle.lineColor = [[CPTColor blackColor] colorWithAlphaComponent:0.5];
    CPTPlotSymbol *plotSymbol = [CPTPlotSymbol ellipsePlotSymbol];
    plotSymbol.fill               = [CPTFill fillWithColor:[[CPTColor blueColor] colorWithAlphaComponent:0.5]];
    plotSymbol.lineStyle          = symbolLineStyle;
    plotSymbol.size               = CGSizeMake(8.0, 8.0);
    plot.plotSymbol = plotSymbol;
    
    //设置范围: 比如y轴 从-1开始显示到15
    plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(-1.0f) length:CPTDecimalFromFloat(15.0f)];
    plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(-2.0f) length:CPTDecimalFromFloat(25.0f)];
    
    //添加触摸功能
    [self addTouchPlot:view];
    
     // 添加图例
    self.graph.legendAnchor=CPTRectAnchorBottomLeft;  //位置
    self.graph.legendDisplacement = CGPointMake(50.0,3.0);
    [self addLegend:@[plot]];
    
    //黑色的长条
    UIView *swipeTitleView=[[UIView alloc]initWithFrame:CGRectMake(self.graph.plotAreaFrame.paddingLeft+20, self.graph.plotAreaFrame.paddingTop+5, ScreenHeight-self.graph.plotAreaFrame.paddingLeft-self.graph.plotAreaFrame.paddingRight-20, 8)];
    [swipeTitleView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"zsbj"]]];
    [view addSubview:swipeTitleView];
    
    //滑动的button
    UIButton * swipeBtn=[UIButton buttonWithType:UIButtonTypeCustom];
    [swipeBtn setBackgroundImage:[UIImage imageNamed:@"button_bj"] forState:UIControlStateNormal];
    [swipeBtn setFrame:CGRectMake(ScreenHeight/2-25, self.graph.plotAreaFrame.paddingTop, 100, 20)];
    [swipeBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [swipeBtn.titleLabel setTextColor:[UIColor blackColor]];
    [swipeBtn.titleLabel setFont:[UIFont boldSystemFontOfSize:13]];
    [swipeBtn setHidden:YES];
    [view addSubview:swipeBtn];
    self.swipeButton=swipeBtn;

小编：

里面的交互写的比较细，可以好好看下，与一般的初级使用corePlot不同