一个线性统计图Demo

image.png

贴代码:
/**

• 一个线性统计图Demo
• Created by baiya on 2017/5/23.
  */

public class LineView extends View {

private Context mContext;
private AttributeSet mAttrs;

private Paint mXPaint;
private TextPaint mTextPaint;
private SparseArray datas;
private Paint mCyclePaint;
private Paint mPathPaint;


public LineView(Context context) {
    this(context, null);
}

public LineView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public LineView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
}


/**
 * 初始化
 *
 * @param context
 * @param attrs
 */
private void init(Context context, AttributeSet attrs) {
    this.mContext = context;
    this.mAttrs = attrs;

    mXPaint = new Paint();
    mXPaint.setStrokeWidth(5);
    mXPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    mXPaint.setColor(Color.RED);

    mTextPaint = new TextPaint();
    mTextPaint.setColor(Color.BLACK);
    mTextPaint.setTextAlign(Paint.Align.CENTER);
    mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    mTextPaint.setTextSize(50);

    mCyclePaint = new Paint();
    mCyclePaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    mCyclePaint.setColor(Color.BLUE);


    datas = new SparseArray<>();
    datas.append(1, 1);
    datas.append(2, 2);
    datas.append(3, 3);
    datas.append(4, 1);
    datas.append(5, 2);
    datas.append(6, 3);
    datas.append(7, 5);
    datas.append(8, 5);
    datas.append(9, 5);

    mPathPaint = new Paint();
    mPathPaint.setStrokeWidth(3);
    mPathPaint.setColor(Color.BLACK);
    mPathPaint.setStyle(Paint.Style.STROKE);



}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //x轴
    canvas.drawLine(70, 700, 900, 700, mXPaint);
    //y轴
    canvas.drawLine(70, 700, 70, 50, mXPaint);
    //x轴上文字
    for (int i = 1; i < 10; i++) {
        canvas.drawText(i + "", 70 + i * 80, 750, mTextPaint);
    }
    //x轴标签上的小标签
    for (int i = 1; i < 10; i++) {
        canvas.drawLine(70 + i * 80, 700, 70 + i * 80, 680, mXPaint);
    }
    //y轴上文字
    for (int i = 1; i < 10; i++) {
        canvas.drawText(i + "", 40, 700 - i * 80 + 18, mTextPaint);
    }

    //y轴标签上的小标签
    for (int i = 1; i < 10; i++) {
        canvas.drawLine(70, 700 - i * 80, 90, 700 - i * 80, mXPaint);
    }


    ArrayList dots = new ArrayList<>();

    for (int i = 1; i <= datas.size(); i++) {
        int number = datas.get(i);
        float cx = 70+i*80;
        float cy = 700-number*80;
        Dot dot = new Dot(cx, cy);
        dots.add(dot);
    }

    Path path = new Path();
    path.reset();
    for (int i = 0; i < dots.size()-1; i++) {
        if (i == 0) {
            path.moveTo(dots.get(i).getCx(), dots.get(i).getCy());//起点
            //控制点,
            float vx = dots.get(i).getCx() + (dots.get(i + 1).getCx() - dots.get(i).getCx())/2;
            float vy = dots.get(i + 1).getCy();

            path.quadTo(vx, vy, dots.get(i+1).getCx(), dots.get(i+1).getCy());//第一条线

        }
        else if (i != 0 && i!= dots.size()-2) {
            //第一个控制点
            float vx1 = dots.get(i).cx+(dots.get(i + 1).getCx() - dots.get(i).getCx())/2;
            float vy1 = dots.get(i).getCy();

            //第二个控制点
            float vx2 = dots.get(i).cx+(dots.get(i + 1).getCx() - dots.get(i).getCx())/2;
            float vy2 = dots.get(i+1).getCy();

            path.cubicTo(vx1, vy1, vx2, vy2,
                    dots.get(i+1).getCx(), dots.get(i+1).getCy());

        } else if (i == dots.size() - 2) {
            path.moveTo(dots.get(i).getCx(),dots.get(i).getCy());

            float vx3 = dots.get(i).cx+(dots.get(i + 1).getCx() - dots.get(i).getCx())/2;
            float vy3 = dots.get(i).getCy();

            path.quadTo(vx3, vy3, dots.get(i+1).getCx(), dots.get(i+1).getCy());
        }
    }

    canvas.drawPath(path, mPathPaint);


    for (int i = 1; i <= datas.size(); i++) {
        int number = datas.get(i);
        float cx = 70+i*80;
        float cy = 700-number*80;
        canvas.drawCircle(cx, cy, 5, mCyclePaint);
    }


}

class Dot {
    private float cx;
    private float cy;

    public Dot(float cx, float cy) {
        this.cx = cx;
        this.cy = cy;
    }

    public float getCx() {
        return cx;
    }

    public void setCx(float cx) {
        this.cx = cx;
    }

    public float getCy() {
        return cy;
    }

    public void setCy(float cy) {
        this.cy = cy;
    }
}

}