动态折线图-Android篇
有时候我们在项目中会遇到使用折线图等图形，Android的开源项目中为我们提供了很多插件，如achartengine第三方Jar包。但是很多时候我们需要根据具体项目自定义这些图表，这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图。先看看绘制的效果：
原理很简单，我就直接给出代码：
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; //刻度长度private int YScale = 40;private int XLength = 380;private int YLength = 240;private int MaxDataSize = XLength / XScale;private List data = new ArrayList();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= 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);//画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);//文字}//画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 上面绘制折线部分我们还有一种方式同样可以实现：
if(data.size() > 1){Path path = new Path();path.moveTo(XPoint, YPoint - data.get(0) * YScale);for(int i=1; i下面我们将上面代码修改，让折线下面的区域颜色填充：
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 阳光小强* http://blog.csdn.net/dawanganban**/
public class MyView extends View {private int XPoint = 60;private int YPoint = 260;private int XScale = 8; // 刻度长度private int YScale = 40;private int XLength = 380;private int YLength = 240;private int MaxDataSize = XLength / XScale;private List data = new ArrayList();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);// 画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);// 文字}// 画X轴canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);// 绘折线/** if(data.size() > 1){ for(int i=1; i 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);}}
} 上面的效果有时候还是达不到我们的要求，我们将代码修改后效果如下：
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 阳光小强 http://blog.csdn.net/dawanganban* */
public class MyView extends View {private int XPoint = 60;private int YPoint = 260;private int XScale = 8; // 刻度长度private int YScale = 40;private int XLength = 380;private int YLength = 240;private int MaxDataSize = XLength / XScale;private List data = new ArrayList();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);// 画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);// 文字}// 画X轴canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);// 绘折线/** if(data.size() > 1){ for(int i=1; i 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);}}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！