正文

iOS中PNChart与UITableView的联动示例详解

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0713
PNChart是个界面很漂亮的图表第三方库，UITableView则不用过多介绍了，各位iOS开发者们都知道，下面这篇文章主要给大家介绍了关于iOS中PNChart与UITableView的联动的相关资料，需要的朋友可

PNChart是个界面很漂亮的图表第三方库，UITableView则不用过多介绍了，各位iOS开发者们都知道，下面这篇文章主要给大家介绍了关于iOS中PNChart与UITableView的联动的相关资料，需要的朋友可以参考下

前言

在开发中，特别是销售企业内部使用的app，可能会用到数据汇总，使用到图表的功能！本文主要给大家介绍了关于ios中pnchart与uitableview联动的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧

效果图

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