手工画折线图(不使用第三方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 stubinitWidget();}public ZXView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubinitWidget();}public ZXView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);// TODO Auto-generated constructor stubinitWidget();}@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubdrawXY(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 stubXoffset=((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");elserulerOffset=(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跟YlastX=-1;lastY=-1;}/** * 画坐标 * @param canvas */private void drawXY(Canvas canvas){canvas.drawLine(XSpac,0,XSpac,getHeight()-5-XSpac, paint);//Xcanvas.drawLine(XSpac,getHeight()-XSpac,getWidth(),getHeight()-XSpac, paint);//Ycanvas.drawLine(getWidth(), 0, getWidth()-1, getHeight()-YSpac, paint);//右边Yfloat 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 stubpaint=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.ZXViewandroid: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)的产品经理去了!你们呢?

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

收敛自己的脾气,偶尔要刻意沉默,

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

相关文章:

你感兴趣的文章:

标签云: