手工画折线图(不使用第三方jar)

大神勿喷谢谢!
  很多刚学android的人很害怕画折线图,觉得折线图呈现非常复杂,感觉自己能力不足无法胜任!而且也有很多也很好用的jar包,但是jar毕竟是别人的,虽说开
源,但是有几个人能打开里面的代码从头研究一遍,一般都是做完项目就扔到一边,jar包功能有限,又怎么去应付那些脑洞大开的UI设计师跟呆傻蠢萌的产品经理
提出的各种需求呢?
上有产品经理,下有测试小妹,好吧,苦逼的程序猿跟程序媛,只能自己动手丰衣足食了!
知道原理后,你就会发现折线图非常简单,开发中有2种解决折线图简单而直接的方法:
1.使用android提供的path类(下篇博文再说);
2.直接使用onDraw(Canvas canvas)方法的canvas去画线就能解决(这篇博文就用它了);
废话不多,上代码!!!


package com.anjie.view;

import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class ZXView extends View {

	private List<Integer> xlist;//x坐标标签
	private List<Integer> ylist;//y坐标标签
	private List<Integer> params;//参数集合
	
	private Paint paint;
	private Paint paintLines;
	private Paint paintArc;
	private Paint paintText;
	
	private float Xoffset=0;//X轴偏移或叫间隔
	private float Yoffset=0;//Y轴偏移或叫间隔
	public float XSpac=50;
	public float Xspac=50;
	public float YSpac=50;
	public float rightXspac=50;
	public float rightYspac=50;
	public int textsize=20;
	
	public float circleRadius=10;
	
	private float lastX=-1;
	private float lastY=-1;
	
	public ZXView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		initWidget();
	}
	
	public ZXView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		initWidget();
	}
	
	public ZXView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		initWidget();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		
		drawXY(canvas);
		drawLine(canvas);
		Log.i("111", getWidth()+"");
		super.onDraw(canvas);
	}

	public void initViewData(List<Integer> xlist,List<Integer> ylist,List<Integer> params){
		this.xlist=xlist;
		this.ylist=ylist;
		this.params=params;
	}
	
	public void updataUI(){
		invalidate();
	}
	
	/**
	 * 画折图
	 * @param canvas
	 */
	private void drawLine(Canvas canvas) {
		// TODO Auto-generated method stub
		Xoffset=((getWidth())-20)/(xlist.size());
		Yoffset=(getHeight())/(ylist.size());
Log.i("texts","X=" + Xoffset+"Y="+Yoffset);
		float rulerOffset=0;
		
		if(xlist.size()<2)
			throw new IllegalArgumentException("the params argument is <2");
		else
			rulerOffset=(xlist.get(1)-xlist.get(0));
		
		
		if(params==null&¶ms.size()<=0)
			throw new IllegalArgumentException("the params is null or 0");
		
		Paint p=new Paint();
		p.setAntiAlias(true);
		p.setTextSize(25);
		p.setColor(Color.WHITE);
		canvas.drawText("KW", 10+Xoffset, 20, p);
		
		for(int i=0;i<params.size();i++){
			int param=params.get(i);
			float histigramHight=param*(Yoffset/rulerOffset);
			
			float currentX=(Xoffset*i+Xspac+5);
			float currentY=(getHeight()-YSpac-histigramHight);
			
			canvas.drawCircle(currentX,currentY,circleRadius, paintArc);
			
			if(lastX!=-1){
				canvas.drawLine(lastX, lastY, currentX, currentY, paintLines);
			}
			lastX=currentX;
			lastY=currentY;
		}
		//重置lastX跟Y
		lastX=-1;
		lastY=-1;
		
	}
	/**
	 * 画坐标
	 * @param canvas
	 */
	private void drawXY(Canvas canvas){
		canvas.drawLine(XSpac,0,XSpac,getHeight()-5-XSpac, paint);//X
		canvas.drawLine(XSpac,getHeight()-XSpac,getWidth(),getHeight()-XSpac, paint);//Y
		canvas.drawLine(getWidth(), 0, getWidth()-1, getHeight()-YSpac, paint);//右边Y
		float yOffset=getHeight()/ylist.size();
		float xOffset=(getWidth()-XSpac)/xlist.size();
		
		for(int i=0;i<ylist.size();i++){//画字
			canvas.drawText(ylist.get(i)+"",0, getHeight()-yOffset*i-YSpac, paintText);
		}
		for(int i=0;i<xlist.size();i++){
			canvas.drawText(xlist.get(i)+"",XSpac+xOffset*i,getHeight()-YSpac+textsize, paintText);
		}
		
		for(int i=0;i<ylist.size();i++){
			for(int j=0;j<50;j++){
				canvas.drawLine(XSpac+j*30,yOffset*i-YSpac,XSpac+j*30+20,yOffset*i-YSpac,paint);
			}
		}
	}

	private void initWidget() {
		// TODO Auto-generated method stub
		paint=new Paint();
		paint.setColor(Color.parseColor("#999999"));
		paint.setTypeface(Typeface.DEFAULT);
		paint.setAntiAlias(true);
		paint.setStrokeWidth(2);
		
		paintLines=new Paint();
		paintLines.setColor(Color.parseColor("#00B4EA"));
		paintLines.setTypeface(Typeface.DEFAULT);
		paintLines.setAntiAlias(true);
		paintLines.setStrokeWidth(3);
		
		paintArc=new Paint();
		paintArc.setColor(Color.parseColor("#EBEEEF"));
		paintArc.setTypeface(Typeface.DEFAULT);
		paintArc.setAntiAlias(true);
		paintArc.setStrokeWidth(2);
		
		paintText=new Paint();
		paintText.setColor(Color.parseColor("#ffffff"));
		paintText.setTypeface(Typeface.DEFAULT);
		paintText.setAntiAlias(true);
		paintText.setStrokeWidth(2);
		paintText.setTextSize(textsize);
	}

	

}

还有layout文件:

<com.anjie.view.ZXView
            android:id="@+id/zx_view"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp" />


客官们可以自己拉下来运行看看或者我提供demo!!!
哈哈!这就完工了,,我拿去应付人(dai)见(sha)人(chun)爱(meng)的产品经理去了!你们呢?



最后声明:大神勿喷!!!



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值