前言
在开发中，特别是销售企业内部使用的app，可能会用到数据汇总，使用到图表的功能！本文主要给大家介绍了关于ios中pnchart与uitableview联动的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧
效果图
1.点击chart，tableview对应模块高亮
pnchart提供了一个代理方法，用来处理用户的点击事件：
|
1
2
3
4
5
6
7
8
9
10
|
#pragma mark - pnchart delegate- (void)userclickedonpieindexitem:(nsinteger)pieindex { for (int i = 0; i < self.model.department_sale.count; i++) { cqsaledetaildepartmentitemmodel *model = self.model.department_sale[i]; model.selected = (i == pieindex); } [self.tableview reloaddata]; [self.tableview scrolltorowatindexpath:[nsindexpath indexpathforrow:pieindex insection:0] atscrollposition:uitableviewscrollpositionmiddle animated:yes];} |
2.点击cell，chart对应模块高亮
pnchart并未提供相应方法让某一模块高亮，怎么办？
思路：
虽然pnchart未直接提供让某一模块高亮的方法，但是我们可以从用户点击模块高亮那部分代码入手，看看用户点击到模块高亮是怎样一个过程。
1.在pnpiechart.m里面找到touchesbegan方法：
|
1
2
3
4
5
6
7
|
- (void)touchesbegan:(nsset *)touches withevent:(uievent *)event{ for (uitouch *touch in touches) { cgpoint touchlocation = [touch locationinview:_contentview]; [self didtouchat:touchlocation]; }} |
发现它调用了didtouchat:方法。
2.分析didtouchat:
|
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
|
- (void)didtouchat:(cgpoint)touchlocation{ cgpoint circlecenter = cgpointmake(_contentview.bounds.size.width/2, _contentview.bounds.size.height/2); cgfloat distancefromcenter = sqrtf(powf((touchlocation.y - circlecenter.y),2) + powf((touchlocation.x - circlecenter.x),2)); if (distancefromcenter < _innercircleradius) { if ([self.delegate respondstoselector:@selector(didunselectpieitem)]) { [self.delegate didunselectpieitem]; } [self.sectorhighlight removefromsuperlayer]; return; } cgfloat percentage = [self findpercentageofangleincircle:circlecenter frompoint:touchlocation]; int index = 0; while (percentage > [self endpercentageforitematindex:index]) { index ++; } if ([self.delegate respondstoselector:@selector(userclickedonpieindexitem:)]) { [self.delegate userclickedonpieindexitem:index]; } if (self.shouldhighlightsectorontouch) { if (!self.enablemultipleselection) { if (self.sectorhighlight) [self.sectorhighlight removefromsuperlayer]; } pnpiechartdataitem *currentitem = [self dataitemforindex:index]; cgfloat red,green,blue,alpha; uicolor *old = currentitem.color; [old getred:&red green:&green blue:&blue alpha:&alpha]; alpha /= 2; uicolor *newcolor = [uicolor colorwithred:red green:green blue:blue alpha:alpha]; cgfloat startpercentage = [self startpercentageforitematindex:index]; cgfloat endpercentage = [self endpercentageforitematindex:index]; self.sectorhighlight = [self newcirclelayerwithradius:_outercircleradius + 5 borderwidth:10 fillcolor:[uicolor clearcolor] bordercolor:newcolor startpercentage:startpercentage endpercentage:endpercentage]; if (self.enablemultipleselection) { nsstring *dictindex = [nsstring stringwithformat:@"%d", index]; cashapelayer *indexshape = [self.selecteditems valueforkey:dictindex]; if (indexshape) { [indexshape removefromsuperlayer]; [self.selecteditems removeobjectforkey:dictindex]; } else { [self.selecteditems setobject:self.sectorhighlight forkey:dictindex]; [_contentview.layer addsublayer:self.sectorhighlight]; } } else { [_contentview.layer addsublayer:self.sectorhighlight]; } }} |
通过源代码我们可以发现，用户点击chart的时候，将传入的参数touchlocation转换成了index，这个index正是代理方法userclickedonpieindexitem:所需要的参数。另外，chart的某一模块高亮，实际上是addsublayer:，而这个sublayer的属性也是由index决定的。所以，通过主动调用一个方法让chart的某个模块高亮，关键就是这个index。
这样的话，就很简单了。只需把didtouchat :的后半段代码提出来，就是我们需要的新方法了：
|
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
|
/** 某一模块高亮 @param index 高亮模块的index */- (void)highlightitemwithindex:(nsinteger)index { if (self.shouldhighlightsectorontouch) { if (!self.enablemultipleselection) { if (self.sectorhighlight) [self.sectorhighlight removefromsuperlayer]; } pnpiechartdataitem *currentitem = [self dataitemforindex:index]; cgfloat red,green,blue,alpha; uicolor *old = currentitem.color; [old getred:&red green:&green blue:&blue alpha:&alpha]; alpha /= 2; uicolor *newcolor = [uicolor colorwithred:red green:green blue:blue alpha:alpha]; cgfloat startpercentage = [self startpercentageforitematindex:index]; cgfloat endpercentage = [self endpercentageforitematindex:index]; self.sectorhighlight = [self newcirclelayerwithradius:_outercircleradius + 5 borderwidth:10 fillcolor:[uicolor clearcolor] bordercolor:newcolor startpercentage:startpercentage endpercentage:endpercentage]; if (self.enablemultipleselection) { nsstring *dictindex = [nsstring stringwithformat:@"%ld", (long)index]; cashapelayer *indexshape = [self.selecteditems valueforkey:dictindex]; if (indexshape) { [indexshape removefromsuperlayer]; [self.selecteditems removeobjectforkey:dictindex]; } else { [self.selecteditems setobject:self.sectorhighlight forkey:dictindex]; [_contentview.layer addsublayer:self.sectorhighlight]; } } else { [_contentview.layer addsublayer:self.sectorhighlight]; } }} |
现在就可以实现点击cell，chart对应模块高亮了：
|
1
2
3
4
5
6
7
8
9
10
|
- (void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath { for (int i = 0; i < self.model.department_sale.count; i++) { cqsaledetaildepartmentitemmodel *model = self.model.department_sale[i]; model.selected = (i == indexpath.row); } [self.tableview reloaddata]; [self.tableview scrolltorowatindexpath:[nsindexpath indexpathforrow:indexpath.row insection:0] atscrollposition:uitableviewscrollpositionmiddle animated:yes]; // 对应的模块高亮 [self.piechart highlightitemwithindex:indexpath.row];} |
修改源码注意事项
如果你的pnchart是手动拖进去的，修改源码无所谓；
但如果是用cocoapods管理的话，就要注意一下了：pod update的时候会覆盖你写的代码。为避免这种事情发生，你可以指定库的版本，如：
|
1
|
pod 'pnchart','0.8.9' |
pod update的时候，若发现其版本是指定的版本，就不会更新了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：https://www.jianshu.com/p/759ea22a2a0f
