Android Canvas exercise (6) Pie Chart (Pie Chart) Percentage tagging Position Calculation skills

Today, we finally solved a maddening HPUX code problem that plagued the entire week. You can say a trick that was derived last night in the middle of the night,

How to mark the percentage at the center of each slice on a Pie Chart. I wrote an article on how to customize a pie chart, but the percentage is in another

The area is not displayed in each slice chart, but not at the time. It took some time last night to finally find out the calculation method.

First upload and finally:

The thought process is also interesting. Let's take a look at the following figures to clearly show how the computation process looks like:

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + icagicagidxpbwcgc3jjjpq = "http://www.2cto.com/uploadfile/Collfiles/20140412/20140412090524102.jpg" alt = "\">

The picture on the left, Indicating the problem to be solved, that is, the currentHow to obtain the center point of the slice if we know the coordinates, radius, and angle of the center.This is a mathematical problem.And I basically gave back all the mathematics to my teacher.

I am ashamed that baidu turned over and finally found the formula for calculating the coordinates of the graph according to the angle. I don't know why (continue to look at it .....) the middle figure is obtained.

Middle figureYou can clearly obtain the intersection position of the last side of each angle. But this position is not what we want. We want the coordinates of the center point. If so, what is the coordinate of the midpoint,

It seems that there is no ready-made formula, so you have to change it flexibly,Just cut the angle by half.. In this way, the rightmost image is obtained.

Rightmost ImageIt is very close to the final effect. In fact, it is enough for many pie charts to obtain the coordinates. Just draw a line and extend it, And then mark the percentage. This is suitable for situations where the angle is too small.

In my example, the angle is too large. You can directly label the percentage to the graph. How can this problem be solved? Based on the previous thought, the process is simple, and now it is on the edge.Narrow down the radiusYou just need to do this. Haha. Finally, I got the desired effect.

Attach the main program code:

Package com. xcl. canvas05;/*** Canvas exercise * percentage on the pie icon. The position marked by the pie chart can be calculated. ** author: xiongchuanliang * date: */import java. text. decimalFormat; import com. xcl. chart. XChartCalc; import android. OS. bundle; import android. annotation. suppressLint; import android. app. activity; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. paint. style; import android. graphics. path; import android. graphics. path. direction; import android. graphics. rectF; import android. util. displayMetrics; import android. view. menu; import android. view. view; @ SuppressLint ("NewApi") public class MainActivity extends Activity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // setContentView (R. layout. activity_main); this. setTitle ("percentage on pie icons"); setContentView (new PanelPieChartLabel (this) ;}@ Override public boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true;} class PanelPieChartLabel extends View {private int ScrWidth, ScrHeight; private float rx, ry; public PanelPieChartLabel (Context context) {super (context ); // TODO Auto-generated constructor stub // solves the problem of canvas in 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); // Paint brush initialization Paint PaintArc = new Paint (); PaintArc. setColor (Color. RED); Paint PaintGree = new Paint (); PaintGree. setColor (Color. GREEN); PaintGree. setStyle (Style. FILL); Paint PaintBlue = new Paint (); PaintBlue. setColor (Color. BLUE); PaintBlue. setStyle (Style. STROKE); Paint PaintYellow = new Paint (); PaintYellow. setColor (Color. YELLOW); PaintYellow. setStyle (Style. FILL); // PaintArc. setAntiAlias (true); PaintYellow. setAntiAlias (true); PaintGree. setAntiAlias (true); PaintBlue. setTextSize (12); float cirX = ScrWidth/2; float cirY = ScrHeight/3; float radius = ScrHeight/5; // 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 ); //////////////////////////////////////// //////////////////// the title of the pie chart canvas. drawText ("author: xiongchuanliang", 60, ScrHeight-270, PaintBlue); // class XChartCalc xcalc = new XChartCalc (); // The actual radius float calcRadius = radius/2 used for calculation; //////////////////////////////////////// ///////////////// // initial float pAngle1 = 130f; float pAngle2 = 40f; float pAngle3 = 360f-pAngle1-pAngle2; // fill the fan canvas. drawArc (arcRF0, 0, pAngle1, true, PaintArc); // calculates and marks the percentage of x 130% in the sector center. calcArcEndPointXY (cirX, cirY, calcRadius, pAngle1/2); canvas. drawText (Float. toString (pAngle1) + "%", xcalc. getPosX (), xcalc. getPosY (), PaintBlue ); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// //// fill the slice canvas. drawArc (arcRF0, pAngle1, pAngle2, true, PaintYellow); // calculate and add the percentage of 40% xcalc to the slice center. calcArcEndPointXY (cirX, cirY, calcRadius, pAngle1 + pAngle2/2); canvas. drawText (Float. toString (pAngle2) + "%", xcalc. getPosX (), xcalc. getPosY (), PaintBlue ); //////////////////////////////////////// //////////////////// calculate and add the percentage of 190% xcalc to the slice center. calcArcEndPointXY (cirX, cirY, calcRadius, pAngle1 + pAngle2 + pAngle3/2); canvas. drawText (Float. toString (pAngle3) + "%", xcalc. getPosX (), xcalc. getPosY (), PaintBlue ); //////////////////////////////////////// ////////////////////}}}

The Code class of the computing position is attached:

Package com. xcl. chart;/*** Canvas exercise * graphic-related computing class ** author: xiongchuanliang * date: 2014-4-9 */public class XChartCalc {// Position private float posX = 0.0f; private float posY = 0.0f; public XChartCalc () {}// Based on the Center Coordinate, radius, sector angle, calculate the xy coordinate public void CalcArcEndPointXY (float cirX, float cirY, float radius, float cirAngle) at the end point of the slice and the arc) {// converts an angle to a radian float arcAngle = (float) (Math. PI * cirAngle/180.0); if (cirAngle <90) {posX = cirX + (float) (Math. cos (arcAngle) * radius; posY = cirY + (float) (Math. sin (arcAngle) * radius;} else if (cirAngle = 90) {posX = cirX; posY = cirY + radius ;} else if (cirAngle> 90 & cirAngle <180) {arcAngle = (float) (Math. PI * (180-cirAngle)/180.0); posX = cirX-(float) (Math. cos (arcAngle) * radius; posY = cirY + (float) (Math. sin (arcAngle) * radius;} else if (cirAngle = 180) {posX = cirX-radius; posY = cirY ;} else if (cirAngle> 180 & cirAngle <270) {arcAngle = (float) (Math. PI * (cirAngle-180)/180.0); posX = cirX-(float) (Math. cos (arcAngle) * radius; posY = cirY-(float) (Math. sin (arcAngle) * radius;} else if (cirAngle = 270) {posX = cirX; posY = cirY-radius;} else {arcAngle = (float) (Math. PI * (360-cirAngle)/180.0); posX = cirX + (float) (Math. cos (arcAngle) * radius; posY = cirY-(float) (Math. sin (arcAngle) * radius;} // public float getPosX () {return posX;} public float getPosY () {return posY ;}//////////////}

At this point, I have encountered two technical problems recently (one of which is forced by work and the other is interested). They have basically solved these problems!

Additional links:

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