Android中使用Canvas绘制南丁格尔玫瑰图(Nightingale rose diagram)

南丁格尔玫瑰图 在常规图表中实在很惊艳，但我初看没看懂，一查原来南丁格尔这么伟大，确实值得尊敬。

再仔细研究了下这种图的构成，发现原来就是把柱形图的柱形换成了扇形图的半径来表示，当然，变种有好多，我这只是说我理解的这种。

知道了其构成方式后就好实现了，依传入参数个数决定其扇形角度，依百分比决定其扇形的半径长度，然后就一切都水到渠成了。

漂亮的美图献上:

附上实现代码:

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

感兴趣的可以看看。

您可能感兴趣的文章:Android 游戏开发之Canvas画布的介绍及方法Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)Android编程之canvas绘制各种图形(点,直线,弧,圆,椭圆,文字,矩形,多边形,曲线,圆角矩形)Android中Canvas的常用方法总结Android使用Canvas绘制圆形进度条效果Android画图之抗锯齿paint和Canvas两种方式实例Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】Android 通过onDraw实现在View中绘图操作的示例Android编程之OpenGL绘图技巧总结Android自定义View绘图实现渐隐动画Android编程之绘图canvas基本用法示例

南丁格尔 玫瑰 canvas Android