Android Canvas exercise (10) Creating a Nightingale rose diagram)

The nightingale rose diagram is amazing in conventional charts, but I didn't understand it at the beginning. It turns out that nightingale is so great and really worthy of respect.

After carefully studying the structure of the image, we found that the original bar chart is represented by the radius of the slice chart. Of course, there are many variants,

This is just what I understand.

After knowing the structure of slice, the slice angle is determined based on the number of input parameters, and the radius length of slice is determined based on the percentage. Then

Everything is going to happen.

Beautiful meitu:

VcnPyrXP1rT6wus6PC9wPgo8cD4gICAgPC9wPgo8cHJlIGNsYXNzPQ = "brush: java;"> package com. xcl. chart;/* ** Canvas exercise * Self-painted Nightingale rose diagram (FIG) ** 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. D IsplayMetrics; import android. view. view; public class PanelRoseChart extends View {private int ScrWidth, ScrHeight; // example of percentage used for demonstration, in actual use, private final float arrPer [] = new float [] {40f, 50f, 60f, 35f, 70f, 80f, 90f} is the proportion parameter passed in externally }; // demo label private final String arrPerLabel [] = new String [] {"PostgreSQL", "Sybase", "DB2", "domestic and other", "MySQL ", "Ms SQL", "Oracle"}; // RGB color array 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 // screen information DisplayMetrics dm = getResources (). getDisplayMetrics (); ScrHeight = dm. heightPixels; ScrWidth = dm. widthPixels;} public void onDraw (Canvas canvas) {// canvas background 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); // class XChartCalc xcalc = new XChartCalc (); float Percentage = 0.0f; float CurrPer = 0.0f; float NewRaidus = 0.0f; int I = 0; // convert the Percentage to the slice radius length Percentage = 360/arrPer. length; Percentage = (float) (Math. round (Percentage * 100)/100; for (I = 0; I code is easy to implement, but the design idea of this graph is indeed very good. Exclamation point.

Be sure to attach the nightingale Wikipedia link: 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

For more information, see.

Attach the link of my other drawn graphs:

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)

Android Canvas exercise (7) draw a comparison chart of defense and control rate of the top eight Champions League

Android Canvas exercise (8) Self-painted circular Chart (Dount Chart)

Android Canvas exercise (9) Self-painted Pie Chart with outstanding effect (Pie Chart)

MAIL: xcl_168@aliyum.com

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