南丁格尔玫瑰图 在常规图表中实在很惊艳，但我初看没看懂，一查原来南丁格尔这么伟大，确实值得尊敬。
再仔细研究了下这种图的构成，发现原来就是把柱形图的柱形换成了扇形图的半径来表示，当然，变种有好多，我这只是说我理解的这种。
知道了其构成方式后就好实现了，依传入参数个数决定其扇形角度，依百分比决定其扇形的半径长度，然后就一切都水到渠成了。
漂亮的美图献上:
附上实现代码:
|
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
package com.xcl.chart;/** * canvas练习 * 自已画南丁格尔玫瑰图(nightingale rose diagram) * * author:xiongchuanliang * date:2014-4-12 */import android.content.context;import android.graphics.canvas;import android.graphics.color;import android.graphics.paint;import android.graphics.paint.style;import android.graphics.rectf;import android.util.displaymetrics;import android.view.view;public class panelrosechart extends view{ private int scrwidth,scrheight; //演示用的百分比例,实际使用中，即为外部传入的比例参数 private final float arrper[] = new float[]{40f,50f,60f,35f,70f,80f,90f}; //演示用标签 private final string arrperlabel[] = new string[]{"postgresql","sybase","db2","国产及其它","mysql","ms sql","oracle"}; //rgb颜色数组 private final int arrcolorrgb[][] = { {77, 83, 97}, {148, 159, 181}, {253, 180, 90}, {52, 194, 188}, {39, 51, 72}, {255, 135, 195}, {215, 124, 124}} ; public panelrosechart(context context) { super(context); // todo auto-generated constructor stub //屏幕信息 displaymetrics dm = getresources().getdisplaymetrics(); scrheight = dm.heightpixels; scrwidth = dm.widthpixels; } public void ondraw(canvas canvas){ //画布背景 canvas.drawcolor(color.black); float cirx = scrwidth / 2; float ciry = scrheight / 3 ; float radius = scrheight / 5 ;//150; float arcleft = cirx - radius; float arctop = ciry - radius ; float arcright = cirx + radius ; float arcbottom = ciry + radius ; rectf arcrf0 = new rectf(arcleft ,arctop,arcright,arcbottom); //画笔初始化 paint paintarc = new paint(); paint paintlabel = new paint(); paintlabel.setcolor(color.white); paintlabel.settextsize(16); paintlabel.setantialias(true); paintarc.setantialias(true); //位置计算类 xchartcalc xcalc = new xchartcalc(); float percentage = 0.0f; float currper = 0.0f; float newraidus = 0.0f; int i= 0; //将百分比转换为扇形半径长度 percentage = 360 / arrper.length; percentage = (float)(math.round(percentage *100))/100; for(i=0; i<arrper.length; i++) { //将百分比转换为新扇区的半径 newraidus = radius * (arrper[i]/ 100); newraidus = (float)(math.round(newraidus *100))/100; float newarcleft = cirx - newraidus; float newarctop = ciry - newraidus ; float newarcright = cirx + newraidus ; float newarcbottom = ciry + newraidus ; rectf newarcrf = new rectf(newarcleft ,newarctop,newarcright,newarcbottom); //分配颜色 paintarc.setargb(255,arrcolorrgb[i][0], arrcolorrgb[i][1], arrcolorrgb[i][2]); //在饼图中显示所占比例 canvas.drawarc(newarcrf, currper, percentage, true, paintarc); //计算百分比标签 xcalc.calcarcendpointxy(cirx, ciry, radius - radius/2/2, currper + percentage/2); //标识 canvas.drawtext(arrperlabel[i],xcalc.getposx(), xcalc.getposy() ,paintlabel); //下次的起始角度 currper += percentage; } //外环 paintlabel.setstyle(style.stroke); paintlabel.setcolor(color.green); canvas.drawcircle(cirx,ciry,radius,paintlabel); canvas.drawtext("author:xiongchuanliang", 10, scrheight - 200, paintlabel); }} |
代码实现起来很容易，但这种图的设计创意确实非常好。 叹服。
一定要附上南丁格尔维基百科的链接: http://zh.wikipedia.org/wiki/%e5%bc%97%e7%be%85%e5%80%ab%e6%96%af%c2%b7%e5%8d%97%e4%b8%81%e6%a0%bc%e7%88%be
感兴趣的可以看看。
