在網易資料酷的<<足壇"斧頭幫"!瘋狂馬競打爆巴薩>>中看到一幅圖，非常有特色，因為最近用Canvas繪了不少圖表，就想用程式碼把這幅圖也繪出來。

基本也繪出來了，效果圖如下:

     繪製這張圖，api用得到不多，但恰好把我前面繪製那些圖的一些技巧都用上了。

附主程式如下:   

package com.xcl.chart;


/**
 * Canvas練習 
 * 	  自已畫環形圖(Dount Chart)
 *     仿網易資料酷中的環形圖
 * author:xiongchuanliang
 * date:2014-4-12
 */


import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.graphics.Typeface;
import android.util.DisplayMetrics;
import android.view.View;

@SuppressLint("NewApi") public class PanelDountChart extends View{

	private int ScrWidth,ScrHeight;	
	
	//總環數
	private final int DuCount = 5;

	public PanelDountChart(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		
		//解決4.1版本 以下canvas.drawTextOnPath()不顯示問題			
		this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
		
		//螢幕資訊
		DisplayMetrics dm = getResources().getDisplayMetrics();
		ScrHeight = dm.heightPixels;
		ScrWidth = dm.widthPixels;
	}
	
	
	public void onDraw(Canvas canvas){
		//畫布背景
		canvas.drawColor(Color.WHITE);

		
		float cirX = ScrWidth / 2;
		float cirY = ScrHeight / 3 ;
		float radius = ScrHeight / 4 ;
		//先畫個圓確定下顯示位置
		//canvas.drawCircle(cirX,cirY,radius,PaintGree);
								
		float arcLeft = cirX - radius;
		float arcTop  = cirY - radius ;
		float arcRight = cirX + radius ;
		float arcBottom = cirY + radius ;
		RectF arcRF0 = new RectF(arcLeft ,arcTop,arcRight,arcBottom);			

		////////////////////////////////////////////////////////////			
		//位置計算類  
        XChartCalc xcalc = new XChartCalc();					
        
        //實際用於計算的半徑
        float calcRadius = radius/2;
		////////////////////////////////////////////////////////////

    	//初始化各環顏色
	 	Paint[] arrPaint = new Paint[6];
	 
	 	arrPaint[0] = new Paint();			
		arrPaint[0].setColor(Color.CYAN);
							
		arrPaint[1] = new Paint();			
		arrPaint[1].setColor(Color.argb(255,1, 73, 157));
		
		arrPaint[2] = new Paint();			
		arrPaint[2].setColor(Color.argb(255,0, 94, 196));
		
		arrPaint[3] = new Paint();			
		arrPaint[3].setColor(Color.argb(255,73, 172, 222));
		
		arrPaint[4] = new Paint();			
		arrPaint[4].setColor(Color.argb(255,145, 218, 255));
					
		arrPaint[5] = new Paint();			
		arrPaint[5].setColor(Color.argb(255,204, 238, 255));
		
		arrPaint[1].setAntiAlias(true);
		arrPaint[2].setAntiAlias(true);
		arrPaint[3].setAntiAlias(true);
		arrPaint[4].setAntiAlias(true);
		arrPaint[5].setAntiAlias(true);
		
		//最外環紅色填充
		Paint PaintDcred = new Paint();
		PaintDcred.setStyle(Style.FILL);
		PaintDcred.setARGB(255,221,19,223);
		PaintDcred.setAntiAlias(true);
		//分割線
		Paint PaintDcLine = new Paint();
		PaintDcLine.setStyle(Style.FILL);
		PaintDcLine.setARGB(255,36, 169, 199);			
		PaintDcLine.setTypeface(Typeface.DEFAULT_BOLD);
		//標註用畫筆
		Paint PaintDcLabel = new Paint();
		PaintDcLabel.setStyle(Style.FILL);
		PaintDcLabel.setColor(Color.BLACK);
		PaintDcLabel.setTextSize(22);
		PaintDcLabel.setTypeface(Typeface.DEFAULT_BOLD);

		//附註
		canvas.drawText("仿網易資料酷",60,ScrHeight - 270, PaintDcLabel);	
		canvas.drawText("author:xiongchuanliang",60,ScrHeight - 250, PaintDcLabel);	

		
		//扇形角度 				
		float pAngle = 72f; 
		//偏移角度
		float pAngleOffset = 18f + 36f; 
		
		//分成五個環
		float avgRadius = radius / DuCount;
		
				
		for(int i=DuCount;i>=0;i--)
		{
			float curRadius = avgRadius * i;
			canvas.drawCircle(cirX,cirY,curRadius,arrPaint[i]);
			if(i == 5)
			{  
				//最外環扇區	
				canvas.drawArc(arcRF0, pAngleOffset + pAngle * (DuCount -1) ,pAngle, true,PaintDcred); 
			}			
		}		
		
		//外圍標註
        String arrLabel[] = new String[]{"控球率","搶斷","黃牌","犯規","失球數"};		
		for(int i=0;i<DuCount;i++)
		{
			Path PathLabel = new Path();
			PathLabel.addArc(arcRF0, pAngle*i+18, pAngle);
			canvas.drawTextOnPath(arrLabel[i],PathLabel,0,0,PaintDcLabel);
		}

		//各項資料陣列
		//String[] arrSort3S = new String[]{"No.1","No.2","No.3","No.3","No.5"};
		String[] arrSort3N = new String[]{"馬競","切爾西","巴薩","拜仁","曼聯"};
		String[] arrSort3V = new String[]{"5","7","8","8","9"};
		
		String[] arrSort4N = new String[]{"拜仁","巴薩","巴黎","皇馬","馬競"};
		String[] arrSort4V = new String[]{"69.2%","68%","61.8%","56%","43.1%"};
		
		String[] arrSort1N = new String[]{"馬競","切爾西","巴薩","多特","巴黎"};
		String[] arrSort1V = new String[]{"23","21","19","19","19"};
		
		String[] arrSort2N = new String[]{"馬競","多特","切爾西","曼聯","巴黎"};
		String[] arrSort2V = new String[]{"155","153","153","131","116"};
		
		String[] arrSort5N = new String[]{"馬競","多特","巴薩","切爾西","皇馬"};
		String[] arrSort5V = new String[]{"268","245","200","197","195"};
		
		//圓心紅色扇區
		arcLeft = cirX - avgRadius;
		arcTop  = cirY - avgRadius ;
		arcRight = cirX + avgRadius ;
		arcBottom = cirY + avgRadius ;
		RectF arcRF1 = new RectF(arcLeft ,arcTop,arcRight ,arcBottom );	
				
		PaintDcLabel.setTextSize(12);
		for(int j=0;j<DuCount;j++)
		{
			
		    if(j < DuCount -1) //最靠右外環填充為紅色
		    {			  
			  canvas.drawArc(arcRF1, pAngleOffset ,pAngle, true,PaintDcred); 
		    }
			
			xcalc.CalcArcEndPointXY(cirX, cirY, radius, pAngleOffset); 	
			 //扇形分割線
		    canvas.drawLine(cirX, cirY,  xcalc.getPosX(), xcalc.getPosY(), PaintDcLine);
		    		    
		    //標註俱樂部名字及各項資料
		   for(int i=0;i<DuCount;i++)
		   {			  		    	 
		    	 xcalc.CalcArcEndPointXY(cirX, cirY, avgRadius * (DuCount-i), pAngleOffset); 
		    	 
		    	 int curNm = DuCount-1-i;
		   		    	  	
		    	 if(j == 0){ //System.getProperty("line.separator")
		    		 canvas.drawText(arrSort5N[curNm]+"("+arrSort5V[curNm]+")", xcalc.getPosX(),xcalc.getPosY(), PaintDcLabel);  
		    	 }else if(j == 1){
		    		 canvas.drawText(arrSort1N[curNm]+"("+arrSort1V[curNm]+")", xcalc.getPosX(),xcalc.getPosY(), PaintDcLabel);  
		    	 }else if(j == 2){
		    		 canvas.drawText(arrSort2N[curNm]+"("+arrSort2V[curNm]+")", xcalc.getPosX(),xcalc.getPosY(), PaintDcLabel);  
		    	 }else if(j == 3){		    	     
		    	     canvas.drawText(arrSort3N[curNm]+"("+arrSort3V[curNm]+")", xcalc.getPosX(),xcalc.getPosY(), PaintDcLabel);  
		    	 }else if(j == 4){
		    		 canvas.drawText(arrSort4N[curNm]+"("+arrSort4V[curNm]+")", xcalc.getPosX(),xcalc.getPosY(), PaintDcLabel);  
		    	 }
		    	 
		    }		    
			pAngleOffset += pAngle;
		}
		///////////////////////////////////
	}
	

}
 

你是用繪圖工具繪製，那當我沒說。

MAIL: [email protected]

BLOG: http://blog.csdn.net/xcl168