前言
在开发中,特别是销售企业内部使用的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