手工画折线图（不使用第三方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）的产品经理去了!你们呢？

最后声明：大神勿喷！！！