Android Custom Component Family "9"--canvas Draw line chart

Sometimes we encounter graphics such as line charts in our projects, and Android's open source projects provide us with a lot of plugins, but many times we need to customize these charts to specific projects, and this article we'll look at how to use canvas to draw a line chart in Android. First look at the effect of the drawing:

The implementation principle is very simple, I will directly give the code:

Package Com.example.testcanvasdraw;import Java.util.arraylist;import Java.util.list;import java.util.Random;import Android.content.context;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.os.handler;import Android.os.message;import Android.util.AttributeSet; Import Android.view.view;public class MyView extends view{private int XPoint = 60;private int ypoint = 260;private int XSc  Ale = 8; Scale length private int yscale = 40;private int xlength = 380;private int ylength = 240;private int maxdatasize = Xlength/xsca Le;private list<integer> data = new arraylist<integer> ();p rivate string[] Ylabel = new String[ylength/yscale ];p rivate Handler Handler = new Handler () {public void Handlemessage (Message msg) {if (Msg.what = = 0x1234) {MyView.this.inva Lidate ();}};}; Public MyView (context context, AttributeSet Attrs) {Super (context, attrs); for (int i=0; i<ylabel.length; i++) {ylabel[ I] = (i + 1) + "M/S";} New Thread (New Runnable () {@Overridepublic void Run () {while (true) {try {thread.sleep ()} catch (Interruptedexception e) {e.printstacktrace ();} if (Data.size () >= maxdatasize) {data.remove (0);} Data.add (New Random (). Nextint (4) + 1); Handler.sendemptymessage (0x1234);}}). Start ();} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Paint paint = new paint ();p aint.setstyle (Paint.Style.STROKE);p Aint.setantialias (true); Anti-aliasing Paint.setcolor (color.blue);//Draw Y-axis canvas.drawline (XPoint, Ypoint-ylength, XPoint, ypoint, paint);//  Y-Axis Arrow canvas.drawline (XPoint, Ypoint-ylength, XPoint-3, Ypoint-ylength + 6, paint);        Arrow canvas.drawline (XPoint, Ypoint-ylength, XPoint + 3, Ypoint-ylength + 6, paint); Add scale and text for (int i=0; I * Yscale < ylength; i++) {Canvas.drawline (XPoint, Ypoint-i * yscale, XPoint + 5, Ypoi  Nt-i * Yscale, paint); Scale Canvas.drawtext (Ylabel[i], XPoint-50, ypoint-i * yscale, paint);//text}//draw X-axis canvas.drawline (XPoint, Ypoi NT, XPoint + xlength, ypoint, paint); SyStem.out.println ("data.size =" + data.size ()), if (Data.size () > 1) {for (int i=1; I<data.size (); i++) {Canvas.drawline (XPoint + (i-1) * XScale, Ypoint-data.get (i-1) * Yscale, XPoint + i * xscale, ypoint-data. Get (i) * yscale, Paint);}}}

We also have a way to do this by drawing the polyline section:

if (Data.size () > 1) {Path PATH = new Path ();p Ath.moveto (XPoint, ypoint-data.get (0) * Yscale); for (int i=1; i<data.si Ze (); i++) {Path.lineto (XPoint + i * xscale, Ypoint-data.get (i) * yscale);} Canvas.drawpath (path, paint);}

Let's modify the above code to fill the area below the polyline with the color

Package Com.example.testcanvasdraw;import Java.util.arraylist;import Java.util.list;import java.util.Random;import Android.content.context;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.path;import Android.os.handler;import Android.os.Message;import Android.util.attributeset;import android.view.view;/** * * @author Sun Xiao Qiang * http://blog.csdn.net/dawanganban * */public cl MyView extends View {private int XPoint = 60;private int ypoint = 260;private int xscale = 8;//scale length private int yscal e = 40;private int xlength = 380;private int ylength = 240;private int maxdatasize = Xlength/xscale;private List<Inte ger> data = new arraylist<integer> ();p rivate string[] Ylabel = new String[ylength/yscale];p rivate Handler Handl ER = new Handler () {public void Handlemessage (Message msg) {if (Msg.what = = 0x1234) {MyView.this.invalidate ();}};}; Public MyView (context context, AttributeSet Attrs) {Super (context, attrs);NT i = 0; i < ylabel.length; i++) {Ylabel[i] = (i + 1) + "M/S";} New Thread (New Runnable () {@Overridepublic void run () {while (true) {try {thread.sleep ()} catch (Interruptedexceptio n e) {e.printstacktrace ();} if (Data.size () >= maxdatasize) {data.remove (0);} Data.add (New Random (). Nextint (4) + 1); Handler.sendemptymessage (0x1234);}}). Start ();} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Paint paint = new paint ();p aint.setstyle (Paint.Style.STROKE);p Aint.setantialias (true); Anti-aliasing Paint.setcolor (color.blue);//Draw Y-axis canvas.drawline (XPoint, Ypoint-ylength, XPoint, ypoint, paint);// Y-Axis Arrow canvas.drawline (XPoint, Ypoint-ylength, XPoint-3, ypoint-ylength+ 6, paint); Arrows Canvas.drawline (XPoint, Ypoint-ylength, XPoint + 3, ypoint-ylength+ 6, paint);//Add scale and text for (int i = 0; I * yscal e < ylength;  i++) {canvas.drawline (XPoint, Ypoint-i * yscale, XPoint + 5, ypoint-i* Yscale, paint);//scale Canvas.drawtext (Ylabel[i], XPOINT-50, Ypoint-i * Yscale, painT)///text}//X-axis canvas.drawline (XPoint, Ypoint, XPoint + xlength, ypoint, paint);//Line Drawing/* * if (data.size () > 1) {for (int I=1; I<data.size (); i++) {* Canvas.drawline (XPoint + (i-1) * XScale, Ypoint-data.get (i-1) * * Yscale, XPoint + i * xscale, Ypoint-data.get (i) * yscale, paint); } *} */paint.setstyle (Paint.Style.FILL), if (Data.size () > 1) {Path PATH = new Path ();p Ath.moveto (XPoint, Ypoint); for ( int i = 0; I < data.size (); i++) {Path.lineto (XPoint + i * xscale, Ypoint-data.get (i) * yscale);} Path.lineto (XPoint + (Data.size ()-1) * XScale, Ypoint); Canvas.drawpath (path, paint);}}}

The above effect is sometimes not up to our requirements, we will modify the code after the effect is as follows:

Package Com.example.testcanvasdraw;import Java.util.arraylist;import Java.util.list;import java.util.Random;import Android.content.context;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.path;import Android.os.handler;import Android.os.Message;import Android.util.attributeset;import android.view.view;/** * * @author Sun Cockroach Http://blog.csdn.net/dawanganban * */public CLA  SS MyView extends View {private int XPoint = 60;private int ypoint = 260;private int xscale = 8;//scale length private int Yscale = 40;private int xlength = 380;private int ylength = 240;private int maxdatasize = Xlength/xscale;private List<Integ er> data = new arraylist<integer> ();p rivate string[] Ylabel = new String[ylength/yscale];p rivate Handler handle R = new Handler () {public void Handlemessage (Message msg) {if (Msg.what = = 0x1234) {MyView.this.invalidate ();}};}; Public MyView (context context, AttributeSet Attrs) {Super (context, attrs);t i = 0; i < ylabel.length; i++) {Ylabel[i] = (i + 1) + "M/S";} New Thread (New Runnable () {@Overridepublic void run () {while (true) {try {thread.sleep ()} catch (Interruptedexceptio n e) {e.printstacktrace ();} if (Data.size () >= maxdatasize) {data.remove (0);} Data.add (New Random (). Nextint (4) + 1); Handler.sendemptymessage (0x1234);}}). Start ();} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Paint paint = new paint ();p aint.setstyle (Paint.Style.STROKE);p Aint.setantialias (true); Anti-aliasing Paint.setcolor (color.blue);//Draw Y-axis canvas.drawline (XPoint, Ypoint-ylength, XPoint, ypoint, paint);// Y-Axis Arrow canvas.drawline (XPoint, Ypoint-ylength, XPoint-3, ypoint-ylength+ 6, paint); Arrows Canvas.drawline (XPoint, Ypoint-ylength, XPoint + 3, ypoint-ylength+ 6, paint);//Add scale and text for (int i = 0; I * yscal e < ylength;  i++) {canvas.drawline (XPoint, Ypoint-i * yscale, XPoint + 5, ypoint-i* Yscale, paint);//scale Canvas.drawtext (Ylabel[i], XPOINT-50, Ypoint-i * yscale, Paint)///text}//X-axis canvas.drawline (XPoint, Ypoint, XPoint + xlength, ypoint, paint);//Line Drawing/* * if (data.size () > 1) {for (int I=1; I<data.size (); i++) {* Canvas.drawline (XPoint + (i-1) * XScale, Ypoint-data.get (i-1) * * Yscale, XPoint + i * xscale, Ypoint-data.get (i) * yscale, paint); } *} */paint.setcolor (color.red);p aint.setstrokewidth (5); Paint Paint2 = new paint ();p aint2.setcolor (color.blue);p Aint2.setstyle (Paint.Style.FILL); if (Data.size () > 1) {Path Path = new Path (); Path path2 = new Path ();p Ath.moveto (XPoint, ypoint-data.get (0) * Yscale);p Ath2.moveto (XPoint, Ypoint); for (int i = 0; i < Data.size (); i++) {Path.lineto (XPoint + i * xscale, Ypoint-data.get (i) * Yscale);p Ath2.lineto (XPoint + i * XScale, Ypoint-data.get ( i) * Yscale);} Path2.lineto (XPoint + (Data.size ()-1) * XScale, Ypoint); Canvas.drawpath (path, paint); Canvas.drawpath (path2, Paint2);}}}

Thank you for the " Sun Xiao Qiang " concern, my other blog is honored to participate in the CSDN to hold the blog post contest, if you feel the small strong blog to help you, please for Xiao Qiang cast your precious vote, vote address :/http vote.blog.csdn.net/article/details?articleid=30101091