Android Radar (spider chart)

Brief introduction

Recently, due to the needs of the project, we need to implement radar chart to show the topic rate of each section.

Radar chart is not complicated to draw, as long as a certain process to draw on it, the most used is path path class, using this class so that we can draw a polygon and other effects.

As follows:

How to use

The use of the method is very simple, directly in the layout file using the control, remember to set a suitable size can be.

Of course, there are open public methods, you can make data, text color and other settings.

    /**     * Set Data     * @param points     *    /public void SetData (arraylist<lastpoint> points) {}    /**     * Set Text     * @param titles     *    /public void Settitles (string[] titles) {}    /**     * Set Number of laps     * @param count< c13/>*/public    void SetCount (int count) {}    /**     * Set gridline color     * @param color */     public    Void Setlinecolor (int color) {}    /**     * Sets the fill area color     * @param color *     /public    void Setvaluecolor (int color) {}    /**     * Set text color     * @param color     *    /public void SetTextColor (int color) {}

Specific implementation

The process of general custom controls has the following steps (personal view):

* 1, constructor (initialize)
* 2, Onmeasure (measured size)
* 3, onsizechanged (ok size)
* 4, OnLayout (the location of the child view, if the child view is included)
* 5, OnDraw (Draw content)
* 6, exposed to the external interface

In this control, 2, 4 do not have to consider, as long as the size (onsizechanged), you can calculate the entire layout of the center, the radar chart is started at this center.

    @Override    protected void onsizechanged (int w, int h, int oldw, int oldh) {        super.onsizechanged (W, H, OLDW, OLDH); C3/>mwidth = W;        Mheight = h;
Center coordinate        Mcenterx = MWIDTH/2;        Mcentery = MHEIGHT/2;        Mradius = (Math.min (mwidth,mheight)/2 * 0.9f);        Postinvalidate ();    }

　　

Draw a spider chart

    /** * Draw Grid * @param canvas */private void DrawLine (canvas canvas) {Path PATH = new Path ();        Spacing between grid lines float distance = Mradius/(mCount-1); for (int i = 0; i < MCount; i++) {//Outside grid graphics Float Currentradius = i * distance;//current radius if (i = = MCo                UNT-1) {//store the coordinates of the point of the last lap mesh mlastpoints.add (new Lastpoint (currentradius,0));                Mlastpoints.add (New Lastpoint (Currentradius/2,-currentradius));                Mlastpoints.add (New Lastpoint (-currentradius/2,-currentradius));                Mlastpoints.add (New Lastpoint (-currentradius,0));                Mlastpoints.add (New Lastpoint (-currentradius/2,currentradius));            Mlastpoints.add (New Lastpoint (Currentradius/2,currentradius));            }//6 dot coordinates make up a grid graph Path.lineto (currentradius,0);            Sets the coordinate point of the last Operation Path.moveto (currentradius,0);  Path.lineto (Currentradius/2,-currentradius);          Path.lineto (-currentradius/2,-currentradius);            Path.lineto (-currentradius,0);            Path.lineto (-currentradius/2,currentradius);            Path.lineto (Currentradius/2,currentradius);            Path.close ();        Canvas.drawpath (Path,mlinepaint); }    }

Draw a line from center to end

    /**     * Draw Grid Diagonal     * @param canvas *    /private void Drawgridline (canvas canvas) {        Path Path = new Path (); 
   for (int i = 0; i < mlastpoints.size (); i++) {            path.reset ();            Lastpoint point = Mlastpoints.get (i);            float x = point.x;            Float y = point.y;            Path.lineto (x, y);            Canvas.drawpath (path, mlinepaint);        }    }

Draw End Text

Because the text and the end of a certain distance, so need to add a certain amount of offset; When the text is displayed to the left of the grid, it overlaps with the mesh, so you need to calculate the length of the text and then offset the distance to the left to resolve the overlap problem.

    /**     * Draw Text     * @param canvas * */    private void DrawText (canvas canvas) {for        (int i = 0; i < mlastpoints. Size (); i++) {            //Text length            float dis = mtextpaint.measuretext (mtitles[i]);            Lastpoint point = Mlastpoints.get (i);            float x = point.x;            Float y = point.y;            if (i = = 2 | | i = = 3 | | i = = 4) {                //left Draw text: The text is displayed on the left of the coordinate                x = X-dis;            }            if (Y > 0) {                y+=18;            }            Canvas.drawtext (Mtitles[i],x,y,mtextpaint);        }    }

Draw Fill Area

    /**     * Draw data line: Fill area     * @param canvas */    private void drawdataline (canvas canvas) {        if (mdatapoints = = null | | Mdatapoints.size () = = 0)            return;        Path PATH = new Path ();        for (int i = 0; i < mdatapoints.size (), i++) {            Lastpoint point = Mdatapoints.get (i);            float x = point.x;            Float y = point.y;            Path.lineto (x, y);            if (i = = 0) {//Moves the last operation point to the first point coordinate, guaranteeing the last call to close, forming a closed shape                path.moveto (x, y);            }            Mvaluepaint.setalpha (255);            Draw Small Dots            canvas.drawcircle (x,y,8,mvaluepaint);        }        Path.close ();        Mvaluepaint.setalpha (127);        Canvas.drawpath (path, mvaluepaint);    }

Android Radar (spider chart)