• 热门专题

Android自定义组件系列【9】Canvas绘制折线图

作者:  发布日期:2014-06-17 21:18:54
Tag标签:线图  组件  
  • 有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在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<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() {
    			
    			@Override
    			public 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();
    	}
    	
    	@Override
    	protected 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<data.size(); i++){
    			    canvas.drawLine(XPoint + (i-1) * XScale, YPoint - data.get(i-1) * YScale, 
    			    		XPoint + i * XScale, YPoint - data.get(i) * YScale, paint);
    			}
    		}
    	}
    }
    
    上面绘制折线部分我们还有一种方式同样可以实现:

     

     

    		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);
    		}
    下面我们将上面代码修改,让折线下面的区域颜色填充

     

     

    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<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() {
    
    			@Override
    			public 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();
    	}
    
    	@Override
    	protected 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<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);
    		}
    	}
    }

     

    上面的效果有时候还是达不到我们的要求,我们将代码修改后效果如下:

     

    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<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() {
    
    			@Override
    			public 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();
    	}
    
    	@Override
    	protected 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<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);
    		}
    	}
    }

     

     

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规