Android Canvas練習(7)繪制歐冠八強防守&控制率數據對比圖

在網易數據酷的<<足壇"斧頭幫"!瘋狂馬競打爆巴薩>>中看到一幅圖，非常有特色，因為最近用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   像這種有特色的圖，可能在現成的圖表庫中是找不到類似的模板可以套用的，而手工用代碼繪制的好處就來了，可以靈活的通過api繪制出來，當然，如果

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





   Android Canvas練習(1)畫一張報表來玩   



   Android Canvas練習(2)自已繪餅圖

   Android Canvas練習(3)自已繪柱形圖

   Android Canvas練習(4)自已繪折線圖
    Android Canvas練習(5)自已繪面積圖(Area Chart)



MAIL: xcl_168@aliyun.com
BLOG: http://blog.csdn.net/xcl168