广

android开发

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

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

    2018-04-13 09:17:58 次阅读 稿源:互联网
    广告

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

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

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

    漂亮的美图献上:

    附上实现代码:

    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

    感兴趣的可以看看。

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告