服务器之家

服务器之家 > 正文

iOS使用Charts框架绘制折线图

时间:2021-02-28 14:11     来源/作者:jianshu_wl

首先先看一下效果:

iOS使用Charts框架绘制折线图

折线图

一、 初始化折线图对象

创建一个折线图的用到的类是linechartview.h, 代码如下:

?
1
2
3
4
5
6
7
8
9
self.linechartview = [[linechartview alloc] init];
self.linechartview.delegate = self;//设置代理
[self.view addsubview:self.linechartview];
[self.linechartview mas_makeconstraints:^(masconstraintmaker *make) {
 make.size.mas_equalto(cgsizemake(self.view.bounds.size.width-20, 300));
 make.center.mas_equalto(self.view);
}];
self.linechartview.backgroundcolor = [uicolor colorwithred:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.linechartview.nodatatext = @"暂无数据";

二、设置折线图外观样式

1.设置交互样式

?
1
2
3
4
5
self.linechartview.scaleyenabled = no;//取消y轴缩放
self.linechartview.doubletaptozoomenabled = no;//取消双击缩放
self.linechartview.dragenabled = yes;//启用拖拽图标
self.linechartview.dragdecelerationenabled = yes;//拖拽后是否有惯性效果
self.linechartview.dragdecelerationfrictioncoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显

2.设置x轴样式

?
1
2
3
4
5
6
chartxaxis *xaxis = self.linechartview.xaxis;
xaxis.axislinewidth = 1.0/[uiscreen mainscreen].scale;//设置x轴线宽
xaxis.labelposition = xaxislabelpositionbottom;//x轴的显示位置,默认是显示在上面的
xaxis.drawgridlinesenabled = no;//不绘制网格线
xaxis.spacebetweenlabels = 4;//设置label间隔
xaxis.labeltextcolor = [self colorwithhexstring:@"#057748"];//label文字颜色

3.设置y轴样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
self.linechartview.rightaxis.enabled = no;//不绘制右边轴
chartyaxis *leftaxis = self.linechartview.leftaxis;//获取左边y轴
leftaxis.labelcount = 5;//y轴label数量,数值不一定,如果forcelabelsenabled等于yes, 则强制绘制制定数量的label, 但是可能不平均
leftaxis.forcelabelsenabled = no;//不强制绘制指定数量的label
leftaxis.showonlyminmaxenabled = no;//是否只显示最大值和最小值
leftaxis.axisminvalue = 0;//设置y轴的最小值
leftaxis.startatzeroenabled = yes;//从0开始绘制
leftaxis.axismaxvalue = 105;//设置y轴的最大值
leftaxis.inverted = no;//是否将y轴进行上下翻转
leftaxis.axislinewidth = 1.0/[uiscreen mainscreen].scale;//y轴线宽
leftaxis.axislinecolor = [uicolor blackcolor];//y轴颜色
leftaxis.valueformatter = [[nsnumberformatter alloc] init];//自定义格式
leftaxis.valueformatter.positivesuffix = @" $";//数字后缀单位
leftaxis.labelposition = yaxislabelpositionoutsidechart;//label位置
leftaxis.labeltextcolor = [self colorwithhexstring:@"#057748"];//文字颜色
leftaxis.labelfont = [uifont systemfontofsize:10.0f];//文字字体

4.设置网格线样式

主要是设置y轴的网格线样式, 代码如下:

?
1
2
3
leftaxis.gridlinedashlengths = @[@3.0f, @3.0f];//设置虚线样式的网格线
leftaxis.gridcolor = [uicolor colorwithred:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//网格线颜色
leftaxis.gridantialiasenabled = yes;//开启抗锯齿

5.添加限制线

限制线可以添加多条, 在这里只添加一条做演示, 代码如下:

?
1
2
3
4
5
6
7
8
9
chartlimitline *limitline = [[chartlimitline alloc] initwithlimit:80 label:@"限制线"];
limitline.linewidth = 2;
limitline.linecolor = [uicolor greencolor];
limitline.linedashlengths = @[@5.0f, @5.0f];//虚线样式
limitline.labelposition = chartlimitlabelpositionrighttop;//位置
limitline.valuetextcolor = [self colorwithhexstring:@"#057748"];//label文字颜色
limitline.valuefont = [uifont systemfontofsize:12];//label字体
[leftaxis addlimitline:limitline];//添加到y轴上
leftaxis.drawlimitlinesbehinddataenabled = yes;//设置限制线绘制在折线图的后面

6.设置折线图描述及图例样式

当有多条折线显示在图表上时, 通常需要一个'图例'来说明每一条折线的名称或者代表的含义, 这时候就要进行图例的设置, 主要代码如下:

?
1
2
3
4
5
[self.linechartview setdescriptiontext:@"折线图"];//折线图描述
[self.linechartview setdescriptiontextcolor:[uicolor darkgraycolor]];
self.linechartview.legend.form = chartlegendformline;//图例的样式
self.linechartview.legend.formsize = 30;//图例中线条的长度
self.linechartview.legend.textcolor = [uicolor darkgraycolor];//图例文字颜色

除了可以用以上这些属性来设置样式以外, 还有其它很多属性, 可以自行尝试. 由于以上这些属性较简单, 从属性名就可以看出其含义, 而且在代码后面也大都有注释, 在这里就不对这些属性作一一解释了.

三、为折线图提供数据

为折线图提供数据, 和柱形图差不多, 唯一不同的是设置折线图的折线线条样式, 在设置线条样式时, 我们可以设置折线的类型, 有阶梯类型和一般类型. 我们也可以设置折线拐点的样式, 拐点的大小, 拐点是否可以是空心类型等. 此外还可以对折线图进行颜色填充, 以此来美化图表. 由于样式太多, 在这里就不多说了, 直接看代码:

?
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
- (linechartdata *)setdata{
 int xvals_count = 12;//x轴上要显示多少条数据
 double maxyval = 100;//y轴的最大值
 //x轴上面需要显示的数据
 nsmutablearray *xvals = [[nsmutablearray alloc] init];
 for (int i = 0; i < xvals_count; i++) {
 [xvals addobject:[nsstring stringwithformat:@"%d月", i+1]];
 }
 //对应y轴上面需要显示的数据
 nsmutablearray *yvals = [[nsmutablearray alloc] init];
 for (int i = 0; i < xvals_count; i++) {
 double mult = maxyval + 1;
 double val = (double)(arc4random_uniform(mult));
 chartdataentry *entry = [[chartdataentry alloc] initwithvalue:val xindex:i];
 [yvals addobject:entry];
 }
 linechartdataset *set1 = nil;
 if (self.linechartview.data.datasetcount > 0) {
 linechartdata *data = (linechartdata *)self.linechartview.data;
 set1 = (linechartdataset *)data.datasets[0];
 set1.yvals = yvals;
 return data;
 }else{
 //创建linechartdataset对象
 set1 = [[linechartdataset alloc] initwithyvals:yvals label:@"linename"];
 //设置折线的样式
 set1.linewidth = 1.0/[uiscreen mainscreen].scale;//折线宽度
 set1.drawvaluesenabled = yes;//是否在拐点处显示数据
 set1.valuecolors = @[[uicolor browncolor]];//折线拐点处显示数据的颜色
 [set1 setcolor:[self colorwithhexstring:@"#007fff"]];//折线颜色
 set1.drawsteppedenabled = no;//是否开启绘制阶梯样式的折线图
 //折线拐点样式
 set1.drawcirclesenabled = no;//是否绘制拐点
 set1.circleradius = 4.0f;//拐点半径
 set1.circlecolors = @[[uicolor redcolor], [uicolor greencolor]];//拐点颜色
 //拐点中间的空心样式
 set1.drawcircleholeenabled = yes;//是否绘制中间的空心
 set1.circleholeradius = 2.0f;//空心的半径
 set1.circleholecolor = [uicolor blackcolor];//空心的颜色
 //折线的颜色填充样式
 //第一种填充样式:单色填充
// set1.drawfilledenabled = yes;//是否填充颜色
// set1.fillcolor = [uicolor redcolor];//填充颜色
// set1.fillalpha = 0.3;//填充颜色的透明度
 //第二种填充样式:渐变填充
 set1.drawfilledenabled = yes;//是否填充颜色
 nsarray *gradientcolors = @[(id)[chartcolortemplates colorfromstring:@"#ffffffff"].cgcolor,
   (id)[chartcolortemplates colorfromstring:@"#ff007fff"].cgcolor];
 cggradientref gradientref = cggradientcreatewithcolors(nil, (cfarrayref)gradientcolors, nil);
 set1.fillalpha = 0.3f;//透明度
 set1.fill = [chartfill fillwithlineargradient:gradientref angle:90.0f];//赋值填充颜色对象
 cggradientrelease(gradientref);//释放gradientref
 //点击选中拐点的交互样式
 set1.highlightenabled = yes;//选中拐点,是否开启高亮效果(显示十字线)
 set1.highlightcolor = [self colorwithhexstring:@"#c83c23"];//点击选中拐点的十字线的颜色
 set1.highlightlinewidth = 1.0/[uiscreen mainscreen].scale;//十字线宽度
 set1.highlightlinedashlengths = @[@5, @5];//十字线的虚线样式
 //将 linechartdataset 对象放入数组中
 nsmutablearray *datasets = [[nsmutablearray alloc] init];
 [datasets addobject:set1];
 //添加第二个linechartdataset对象
// linechartdataset *set2 = [set1 copy];
// nsmutablearray *yvals2 = [[nsmutablearray alloc] init];
// for (int i = 0; i < xvals_count; i++) {
// double mult = maxyval + 1;
// double val = (double)(arc4random_uniform(mult));
// chartdataentry *entry = [[chartdataentry alloc] initwithvalue:val xindex:i];
// [yvals2 addobject:entry];
// }
// set2.yvals = yvals2;
// [set2 setcolor:[uicolor redcolor]];
// set2.drawfilledenabled = yes;//是否填充颜色
// set2.fillcolor = [uicolor redcolor];//填充颜色
// set2.fillalpha = 0.1;//填充颜色的透明度
// [datasets addobject:set2];
 //创建 linechartdata 对象, 此对象就是linechartview需要最终数据对象
 linechartdata *data = [[linechartdata alloc] initwithxvals:xvals datasets:datasets];
 [data setvaluefont:[uifont fontwithname:@"helveticaneue-light" size:8.f]];//文字字体
 [data setvaluetextcolor:[uicolor graycolor]];//文字颜色
 nsnumberformatter *formatter = [[nsnumberformatter alloc] init];
 //自定义数据显示格式
 [formatter setnumberstyle:nsnumberformatterdecimalstyle];
 [formatter setpositiveformat:@"#0.0"];
 [data setvalueformatter:formatter];
 return data;
 }
}

代理方法和其他图表一样,这里就不再赘述了.

运行结果如下:

iOS使用Charts框架绘制折线图

运行结果

为折线图提供数据的用到的是linechartdata类创建的对象, 在linechartdata对象初始化时, 需要提供datasets数组(里面放的是linechartdataset对象), 上面的例子中datasets数组中只有一个linechartdataset对象, 也就是只有一条折线, 我们也可以在datasets数组中放入多个linechartdataset对象, 也就是多条曲线, 下面的结果就是添加2条折线的效果, 如下图:

iOS使用Charts框架绘制折线图

多条折线的折线图

demo 下载地址: linechartdemo-master.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持服务器之家!

原文链接:http://www.jianshu.com/p/27c756b536df

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部