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下载