Android Canvas exercise (7) draw a comparison chart of Champions League top 8 defense & amp; control rate data

On Netease, data is cool < <足坛"斧头帮"!疯狂马竞打爆巴萨> >.

It is also illustrated as follows:

I didn't get much use of the api to draw this image, but I used some of the techniques I used to draw those images.

The main program is as follows:

Package com. xcl. chart;/*** Canvas exercise * Self-drawn circular Chart (Dount chart) * similar to the circular Chart in Netease's data cool * 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; // total number of loops private final int DuCount = 5; public PanelDountChart (Context context) {super (context); // TODO Auto-generated constructor stub // solves canvas versions earlier than 4.1. drawTextOnPath () does not display the problem this. setLayerType (View. LAYER_TYPE_SOFTWARE, null); // display information DisplayMetrics dm = getResources (). getDisplayMetrics (); ScrHeight = dm. heightPixels; ScrWidth = dm. widthPixels;} public void onDraw (Canvas canvas) {// canvas background Canvas. drawColor (Color. WHITE); float cirX = ScrWidth/2; float cirY = ScrHeight/3; float radius = ScrHeight/4; // draw a circle to determine the position of the 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 ); //////////////////////////////////////// //////////////// Position Calculation class XChartCalc xcalc = new XChartCalc (); // The actual radius float calcRadius = radius/2 used for calculation; //////////////////////////////////////// /////////////////// initialize the color of each ring painting [] arrPaint = new Paint [6]; arrPaint [0] = new Paint (); arrPaint [0]. setColor (Color. CYAN); arrPaint [1] = new Paint (); arrPaint [1]. setColor (Color. argb (73,157,); arrPaint [2] = new Paint (); arrPaint [2]. setColor (Color. argb (94,196,); arrPaint [3] = new Paint (); arrPaint [3]. setColor (Color. argb (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); // The outermost ring is filled with red Paint PaintDcred = new Paint (); PaintDcred. setStyle (Style. FILL); PaintDcred. setARGB (255,221, 19,223); PaintDcred. setAntiAlias (true); // split line 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); // specifies the canvas. drawText ("Netease data cool", 60, ScrHeight-270, PaintDcLabel); canvas. drawText ("author: xiongchuanliang", 60, ScrHeight-250, PaintDcLabel); // float pAngle = 72f; // float pAngleOffset = 18f + 36f; // It is divided into five loops: 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) {// The outermost sector canvas. drawArc (arcRF0, pAngleOffset + pAngle * (DuCount-1), pAngle, true, PaintDcred );}} // peripheral String arrLabel [] = new String [] {"ball control rate", "Force disconnection", "Yellow Card", "foul", "number of players "}; for (int I = 0; I
 
  
Similar templates may not be available in the ready-made chart library, but the benefits of manual code-based rendering can be flexibly drawn through APIS, of course, if
  

  
You're drawing with a drawing tool, so I didn't say that.
  


  

  
Android Canvas exercise (1) Draw a report
  

  
Android Canvas exercise (2) Self-painted pie chart
  
Android Canvas exercise (3) Self-painted column chart
  
Android Canvas exercise (4) Self-drawing line chart
Android Canvas exercise (5) Area Chart)
  


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