南丁格尔玫瑰图 在常规图表中实在很惊艳，但我初看没看懂，一查原来南丁格尔这么伟大，确实值得尊敬。
再仔细研究了下这种图的构成，发现原来就是把柱形图的柱形换成了扇形图的半径来表示，当然，变种有好多，我这只是说我理解的这种。
知道了其构成方式后就好实现了，依传入参数个数决定其扇形角度，依百分比决定其扇形的半径长度，然后就一切都水到渠成了。
漂亮的美图献上:
附上实现代码:
|
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
感兴趣的可以看看。