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

 更新时间:2015年03月28日 12:51:12   投稿:junjie  
这篇文章主要介绍了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抽奖轮盘的制作方法

    Android抽奖轮盘的制作方法

    这篇文章主要为大家详细介绍了Android抽奖轮盘的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android 通过代码设置、打开wifi热点及热点连接的实现代码

    Android 通过代码设置、打开wifi热点及热点连接的实现代码

    这篇文章主要介绍了Android 通过代码设置、打开wifi热点及热点连接的实现代码,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2018-05-05
  • Android RecyclerView选择多个item的实现代码

    Android RecyclerView选择多个item的实现代码

    这篇文章主要为大家详细介绍了Android RecyclerView选择多个item的实现代码,仿网易新闻客户端频道选择效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Listvie简单实现购物车功能

    Listvie简单实现购物车功能

    这篇文章主要为大家详细介绍了Listvie简单实现购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Android中实现自动生成布局View的初始化代码方法

    Android中实现自动生成布局View的初始化代码方法

    这篇文章主要介绍了Android中实现自动生成布局View的初始化代码方法,本文使用解析layout 布局文件的方法实现需求,需要的朋友可以参考下
    2014-10-10
  • Android基于反射技术实现的加减乘除运算示例

    Android基于反射技术实现的加减乘除运算示例

    这篇文章主要介绍了Android基于反射技术实现的加减乘除运算,较为详细的描述了反射技术的原理,并结合完整实例形式分析了Android基于反射技术实现加减乘除四则运算的相关操作步骤与实现技巧,需要的朋友可以参考下
    2016-10-10
  • Android设置透明状态栏和透明导航栏

    Android设置透明状态栏和透明导航栏

    本文主要介绍了Android设置透明状态栏和透明导航栏的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Android开关控件Switch的使用案例

    Android开关控件Switch的使用案例

    今天小编就为大家分享一篇关于Android开关控件Switch的使用案例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • Android如何获取双卡手机IMEI的方法示例

    Android如何获取双卡手机IMEI的方法示例

    这篇文章主要介绍了Android如何获取双卡手机IMEI的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Kotlin Thread线程与UI更新详解

    Kotlin Thread线程与UI更新详解

    本篇主要介绍Kotlin中Thread线程与UI更新,注意不是协程而是线程。Kotlin本身是支持线程的。同时协程也是运行在线程中的
    2022-12-12

最新评论