android 自訂折線圖

標籤：

看圖：

 

比較簡陋，主要是通過canvas畫上去的：

package com.example.democurvegraph.view;import java.util.ArrayList;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup.LayoutParams;/** * 自訂局部折線圖 * @author feijian * @time 2015年6月29日15:37:41 */public class CurveView extends View{    ArrayList<Float> listData;    int mHeight,mWidth;    private int default_circle_radius = 4;    private int selected_circle_radius = 8;    private int padding = 8;    private int widthEMS = 0;  //兩個相鄰描點之間的距離//    private float avg = 0;// listData裡面數組的平均值    private float maxValue = 0;//最大的值    private int lineColor=0; //線條的顏色    private int circleColor=0; //圓圈的顏色    private float pre_X = 0,pre_Y = 0;    public CurveView(Context context) {        super(context);    }    public CurveView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public CurveView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    /**     * 自訂初始化畫圖資料     * @param listData     * @param lineColor     * @param circleColor     */    public void DrawData(ArrayList<Float> listData,int lineColor,int circleColor)    {        this.listData = listData;        LayoutParams llparam = this.getLayoutParams();        mHeight = llparam.height;        mWidth = llparam.width;        if(listData!=null)        {            for(int i=0;i<listData.size();i++)            {                if(this.maxValue < listData.get(i))                {                    this.maxValue = listData.get(i);                }            }        }        this.lineColor = lineColor;        this.circleColor = circleColor;                this.widthEMS = (mWidth-padding*2)/listData.size();        System.out.print("widthEMS="+widthEMS+";mWidth="+mWidth+";paddingLeft="+padding+";size="                +listData.size()+";mHeight="+mHeight);        invalidate();//重新整理介面    }    @Override    protected void onDraw(Canvas canvas) {        System.out.println("onDraw init");        if(listData!=null)        {            System.out.println("onDraw");            Paint circlePaint = new Paint();            circlePaint.setColor(circleColor);            Paint linePaint = new Paint();            linePaint.setColor(lineColor);            for(int i=0;i<listData.size();i++)            {                if(pre_X==0 && pre_Y==0)  //說明開始畫第一個圈圈                {                    pre_X=padding;                    pre_Y = (mHeight - listData.get(i)*mHeight / maxValue);                }                System.out.println("pre_X="+pre_X+";pre_Y="+pre_Y);                if(i > 0)  //這時需要畫前一個線段                {                    canvas.drawLine(pre_X, pre_Y, pre_X+widthEMS, mHeight - listData.get(i)*mHeight / maxValue, linePaint);                    pre_X = pre_X+widthEMS;                    pre_Y = mHeight - listData.get(i)*mHeight / maxValue;                }                canvas.drawCircle(pre_X, pre_Y, default_circle_radius, circlePaint);            }        }                super.onDraw(canvas);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        // 擷取點擊螢幕時的點的座標          float x = event.getX();          float y = event.getY();         System.out.println("x="+x+";y="+y+",event.getAction()"+event.getAction());        return super.onTouchEvent(event);    }}

 

使用方法：

curveView = (CurveView) findViewById(R.id.v_curve);        LayoutParams llparams = curveView.getLayoutParams();        llparams.height = 140;        llparams.width = 400;        ArrayList<Float> listData = new ArrayList<Float>();        listData.add(1f);        listData.add(2f);        listData.add(3f);        listData.add(2f);        listData.add(5f);        listData.add(1f);        listData.add(4f);        curveView.DrawData(listData,Color.parseColor("#ffffff"),Color.parseColor("#ffffff"));

 

demo下載

android 自訂折線圖