一个线性统计图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<Integer> 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<Dot> 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;
    }
}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,080评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,885评论 25 709
  • 今天看到一篇文章,说QQ宠物多少级了?突然想到18年前我的QQ号也有一个宠物,很着急怎么养,怕死了?花钱上学,...
    萌小呆M阅读 230评论 0 2
  • 这段时间集中对自己进行了各类头脑风暴,于是渐渐开始梳理出一个自我改变和管理的规划。一切,只待行动与坚持了。决定在财...
    糊宝阅读 658评论 0 2
  • 需求递交时确认平台(打印版本还是电子版本),以哪个为主。 下文以打印版本转电子版本为例—— 1.页眉 打印版本:为...
    Yunishere阅读 425评论 0 0