前言

有时候我们在处理一些数据的时候，需要用到折线图来呈现数据，让用户能够对数据更加清晰明，本文主要给大家介绍了关于ios实现多条折线图的相关内容，下面话不多说，来看看详细的介绍吧。

效果图如下：

1、封装类

.h

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #define xyqcolor(r, g, b) [uicolor colorwithred:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0] #define xyqrandomcolor xyqcolor(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256)) #define margin 30 // 坐标轴与画布间距 #define y_every_margin 20 // y轴每一个值的间隔数 #import <uikit/uikit.h> // 线条类型 typedef ns_enum(nsinteger, linetype) { linetype_straight, // 折线 linetype_curve // 曲线 }; @interface beziercurveview : uiview //初始化画布 +(instancetype)initwithframe:(cgrect)frame; //画多根折线图 -(void)drawmorelinechartviewwithx_value_names:(nsmutablearray *)x_names targetvalues:(nsmutablearray *)targetvalues linetype:(linetype) linetype; @end

.m

? 1 2 3 4 5 6 7 #import "beziercurveview.h" static cgrect myframe; @interface beziercurveview () @end ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @implementation beziercurveview //初始化画布 +(instancetype)initwithframe:(cgrect)frame{ beziercurveview *beziercurveview = [[beziercurveview alloc]init]; beziercurveview.frame = frame; //背景视图 uiview *backview = [[uiview alloc] initwithframe:cgrectmake(0, 0, frame.size.width, frame.size.height)]; backview.backgroundcolor = [uicolor clearcolor]; [beziercurveview addsubview:backview]; myframe = frame; return beziercurveview; } ? 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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 /** * 画坐标轴 */ -(void)drawxyline:(nsmutablearray *)x_names{ uibezierpath *path = [uibezierpath bezierpath]; //1.y轴、x轴的直线 [path movetopoint:cgpointmake(margin, cgrectgetheight(myframe)-margin)]; [path addlinetopoint:cgpointmake(margin, margin)]; [path movetopoint:cgpointmake(margin, cgrectgetheight(myframe)-margin)]; [path addlinetopoint:cgpointmake(cgrectgetwidth(myframe), cgrectgetheight(myframe)-margin)]; // //2.添加箭头 // [path movetopoint:cgpointmake(margin, margin)]; // [path addlinetopoint:cgpointmake(margin-5, margin+5)]; // [path movetopoint:cgpointmake(margin, margin)]; // [path addlinetopoint:cgpointmake(margin+5, margin+5)]; // // [path movetopoint:cgpointmake(cgrectgetwidth(myframe), cgrectgetheight(myframe)-margin)]; // [path addlinetopoint:cgpointmake(cgrectgetwidth(myframe)-5, cgrectgetheight(myframe)-margin-5)]; // [path movetopoint:cgpointmake(cgrectgetwidth(myframe), cgrectgetheight(myframe)-margin)]; // [path addlinetopoint:cgpointmake(cgrectgetwidth(myframe)-5, cgrectgetheight(myframe)-margin+5)]; //3.添加索引格 //x轴 for (int i=0; i<x_names.count; i++) { cgfloat x = margin + (cgrectgetwidth(myframe)-30)/x_names.count*(i+1)-(cgrectgetwidth(myframe)-30)/x_names.count/2.0; cgpoint point = cgpointmake(x,cgrectgetheight(myframe)-margin); [path movetopoint:point]; [path addlinetopoint:cgpointmake(point.x, point.y-3)]; } //y轴（实际长度为200,此处比例缩小一倍使用） for (int i=0; i<11; i++) { cgfloat y = cgrectgetheight(myframe)-margin-y_every_margin*i; cgpoint point = cgpointmake(margin,y); [path movetopoint:point]; [path addlinetopoint:cgpointmake(point.x+3, point.y)]; } //4.添加索引格文字 //x轴 for (int i=0; i<x_names.count; i++) { cgfloat x = margin + (cgrectgetwidth(myframe)-30)/x_names.count/2.0 + (cgrectgetwidth(myframe)-30)/x_names.count*i-(cgrectgetwidth(myframe)-30)/x_names.count/2.0; uilabel *textlabel = [[uilabel alloc] initwithframe:cgrectmake(x, cgrectgetheight(myframe)-margin, (cgrectgetwidth(myframe)-60)/x_names.count, 20)]; textlabel.text = x_names[i]; textlabel.font = [uifont systemfontofsize:10]; textlabel.textalignment = nstextalignmentcenter; textlabel.textcolor = [uicolor bluecolor]; [self addsubview:textlabel]; } //y轴 for (int i=0; i<11; i++) { cgfloat y = cgrectgetheight(myframe)-margin-y_every_margin*i; uilabel *textlabel = [[uilabel alloc] initwithframe:cgrectmake(0, y-5, margin, 10)]; textlabel.text = [nsstring stringwithformat:@"%d",10*i]; textlabel.font = [uifont systemfontofsize:10]; textlabel.textalignment = nstextalignmentcenter; textlabel.textcolor = [uicolor redcolor]; [self addsubview:textlabel]; } //5.渲染路径 cashapelayer *shapelayer = [cashapelayer layer]; shapelayer.path = path.cgpath; shapelayer.strokecolor = [uicolor blackcolor].cgcolor; shapelayer.fillcolor = [uicolor clearcolor].cgcolor; shapelayer.borderwidth = 2.0; [self.subviews[0].layer addsublayer:shapelayer]; } ? 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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 /** * 画多根折线图 */ -(void)drawmorelinechartviewwithx_value_names:(nsmutablearray *)x_names targetvalues:(nsmutablearray *)targetvalues linetype:(linetype) linetype{ //1.画坐标轴 [self drawxyline:x_names]; for (int j=0; j<targetvalues.count; j++) { //2.获取目标值点坐标 nsmutablearray *allpoints = [nsmutablearray array]; for (int i=0; i<[targetvalues[j] count]; i++) { cgfloat doublevalue = 2*[targetvalues[j][i] floatvalue]; //目标值放大两倍 cgfloat x = margin + (cgrectgetwidth(myframe)-30)/x_names.count*(i+1)-(cgrectgetwidth(myframe)-30)/x_names.count/2.0; cgfloat y = cgrectgetheight(myframe)-margin-doublevalue; cgpoint point = cgpointmake(x,y); uibezierpath *path = [uibezierpath bezierpathwithroundedrect:cgrectmake(point.x-1, point.y-1, 2.5, 2.5) cornerradius:2.5]; cashapelayer *layer = [cashapelayer layer]; layer.strokecolor = [uicolor purplecolor].cgcolor; layer.fillcolor = [uicolor purplecolor].cgcolor; layer.path = path.cgpath; [self.subviews[0].layer addsublayer:layer]; [allpoints addobject:[nsvalue valuewithcgpoint:point]]; } //3.坐标连线 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:[allpoints[0] cgpointvalue]]; cgpoint preponit; switch (linetype) { case linetype_straight: //直线 for (int i =1; i<allpoints.count; i++) { cgpoint point = [allpoints[i] cgpointvalue]; [path addlinetopoint:point]; } break; case linetype_curve: //曲线 for (int i =0; i<allpoints.count; i++) { if (i==0) { preponit = [allpoints[0] cgpointvalue]; }else{ cgpoint nowpoint = [allpoints[i] cgpointvalue]; [path addcurvetopoint:nowpoint controlpoint1:cgpointmake((preponit.x+nowpoint.x)/2, preponit.y) controlpoint2:cgpointmake((preponit.x+nowpoint.x)/2, nowpoint.y)]; //三次曲线 preponit = nowpoint; } } break; } cashapelayer *shapelayer = [cashapelayer layer]; shapelayer.path = path.cgpath; shapelayer.strokecolor = xyqrandomcolor.cgcolor; shapelayer.fillcolor = [uicolor clearcolor].cgcolor; shapelayer.borderwidth = 2.0; [self.subviews[0].layer addsublayer:shapelayer]; } }

2、调用

? 1 2 #define screen_w [uiscreen mainscreen].bounds.size.width #define screen_h [uiscreen mainscreen].bounds.size.height ? 1 2 3 4 5 6 //1.初始化 _bezierview = [beziercurveview initwithframe:cgrectmake(30, 30, screen_w-60, 280)]; _bezierview.center = self.view.center; [self.view addsubview:_bezierview]; // 多根折线图 [_bezierview drawmorelinechartviewwithx_value_names:(nsmutablearray *)@[@"语文",@"数学",@"英语",@"物理",@"化学",@"生物",@"政治",@"历史",@"地理"] targetvalues:(nsmutablearray *)@[@[@60,@20,@50,@30,@90,@30,@100,@70, @20],@[@20,@40,@20,@50,@30,@90,@30,@100,@70],@[@10,@30,@40,@70,@50,@30,@20,@10,@80]] linetype:linetype_straight];

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。

原文链接：http://www.jianshu.com/p/ec73329c50b0