有時(shí)候我們?cè)陧?xiàng)目中會(huì)遇到使用折線圖等圖形，Android的開(kāi)源項(xiàng)目中為我們提供了很多插件，如achartengine第三方Jar包。但是很多時(shí)候我們需要根據(jù)具體項(xiàng)目自定義這些圖表，這一篇文章我們一起來(lái)看看如何在Android中使用Canvas繪制折線圖。先看看繪制的效果：

原理很簡(jiǎn)單，我就直接給出代碼：

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 XScale = 8; //刻度長(zhǎng)度private int YScale = 40;private int XLength = 380;private int YLength = 240;private int MaxDataSize = XLength / XScale;private List<Integer> data = new ArrayList<Integer>();private String[] YLabel = new String[YLength / YScale];private Handler handler = new Handler(){public void handleMessage(Message msg) {if(msg.what == 0x1234){MyView.this.invalidate();}};};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(1000);} 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();paint.setStyle(Paint.Style.STROKE);paint.setAntiAlias(true); //去鋸齒paint.setColor(Color.BLUE);//畫(huà)Y軸canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);//Y軸箭頭canvas.drawLine(XPoint, YPoint - YLength, XPoint - 3, YPoint-YLength + 6, paint); //箭頭canvas.drawLine(XPoint, YPoint - YLength, XPoint + 3, YPoint-YLength + 6 ,paint);//添加刻度和文字for(int i=0; i * YScale < YLength; i++) {canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + 5, YPoint - i * YScale, paint); //刻度canvas.drawText(YLabel[i], XPoint - 50, YPoint - i * YScale, paint);//文字}//畫(huà)X軸canvas.drawLine(XPoint, YPoint, 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);}}} }

上面繪制折線部分我們還有一種方式同樣可以實(shí)現(xiàn)：

if(data.size() > 1){Path path = new Path();path.moveTo(XPoint, YPoint - data.get(0) * YScale);for(int i=1; i<data.size(); i++){path.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);}canvas.drawPath(path, paint); }

下面我們將上面代碼修改，讓折線下面的區(qū)域顏色填充：

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 陽(yáng)光小強(qiáng)* http://blog.csdn.net/dawanganban**/ public class MyView extends View {private int XPoint = 60;private int YPoint = 260;private int XScale = 8; // 刻度長(zhǎng)度private int YScale = 40;private int XLength = 380;private int YLength = 240;private int MaxDataSize = XLength / XScale;private List<Integer> data = new ArrayList<Integer>();private String[] YLabel = new String[YLength / YScale];private Handler handler = new Handler() {public void handleMessage(Message msg) {if (msg.what == 0x1234) {MyView.this.invalidate();}};};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(1000);} 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();paint.setStyle(Paint.Style.STROKE);paint.setAntiAlias(true); // 去鋸齒paint.setColor(Color.BLUE);// 畫(huà)Y軸canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);// Y軸箭頭canvas.drawLine(XPoint, YPoint - YLength, XPoint - 3, YPoint - YLength+ 6, paint); // 箭頭canvas.drawLine(XPoint, YPoint - YLength, XPoint + 3, YPoint - YLength+ 6, paint);// 添加刻度和文字for (int i = 0; i * YScale < YLength; i++) {canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + 5, YPoint - i* YScale, paint); // 刻度canvas.drawText(YLabel[i], XPoint - 50, YPoint - i * YScale, paint);// 文字}// 畫(huà)X軸canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);// 繪折線/** 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();path.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);}} }

上面的效果有時(shí)候還是達(dá)不到我們的要求，我們將代碼修改后效果如下：

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 陽(yáng)光小強(qiáng) http://blog.csdn.net/dawanganban* */ public class MyView extends View {private int XPoint = 60;private int YPoint = 260;private int XScale = 8; // 刻度長(zhǎng)度private int YScale = 40;private int XLength = 380;private int YLength = 240;private int MaxDataSize = XLength / XScale;private List<Integer> data = new ArrayList<Integer>();private String[] YLabel = new String[YLength / YScale];private Handler handler = new Handler() {public void handleMessage(Message msg) {if (msg.what == 0x1234) {MyView.this.invalidate();}};};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(1000);} 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();paint.setStyle(Paint.Style.STROKE);paint.setAntiAlias(true); // 去鋸齒paint.setColor(Color.BLUE);// 畫(huà)Y軸canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);// Y軸箭頭canvas.drawLine(XPoint, YPoint - YLength, XPoint - 3, YPoint - YLength+ 6, paint); // 箭頭canvas.drawLine(XPoint, YPoint - YLength, XPoint + 3, YPoint - YLength+ 6, paint);// 添加刻度和文字for (int i = 0; i * YScale < YLength; i++) {canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + 5, YPoint - i* YScale, paint); // 刻度canvas.drawText(YLabel[i], XPoint - 50, YPoint - i * YScale, paint);// 文字}// 畫(huà)X軸canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);// 繪折線/** 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);paint.setStrokeWidth(5);Paint paint2 = new Paint();paint2.setColor(Color.BLUE);paint2.setStyle(Paint.Style.FILL);if (data.size() > 1) {Path path = new Path();Path path4 = new Path();path.moveTo(XPoint, YPoint - data.get(0) * YScale);path4.moveTo(XPoint, YPoint);for (int i = 0; i < data.size(); i++) {path.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);path4.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);}path4.lineTo(XPoint + (data.size() - 1) * XScale, YPoint);canvas.drawPath(path, paint);canvas.drawPath(path4, paint2);}} }

原作者：http://www.it165.net/pro/html/201406/15815.html

總結(jié)

以上是生活随笔為你收集整理的动态折线图-Android篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。