使用Canvas和Paint自己绘制折线图

主要用于Canvas一个特别简单的小demo。

能够手动点击看每一个月份的数据。很easy。就是用paint在canvas上画出来的。

主要内容就是计算左边价格的位置，以下日期的位置，三根虚线的位置，五个点四根折线加价格标签的位置。

绿色价格标签是由一个圆角矩形一个三角形加一个text组成的。能够依据点击的位置在五个点上面显示。

两种方式：一种加动画一种不带动画。带动画的就是先显示五个点，然后折线从左往右显示

动画的实现是用handler不断改变须要画的折线的坐标的位置，然后一路画过去。

代码例如以下。须要的能够去github自行下载。

喜欢的请star

public class ChartView extends ImageView {

    /**
     * 须要传入一个ChartBeanList，里面包括表格上显示的每一个点的信息。包括时间点和价格
     *
     */

    public static int height = 300;
    public static double width = 600;

    private int heightReal;// 图表实际的高度
    private int heightText = 70;// 底部显示时间的区域
    private int heightTop = 0;// 图表上面的空白区

    private int multi = 1;// 用来适配各种分辨率的机器的，为倍数
    private int radi = 5 * multi;// 圆点的半径

    private int widthReal;// 图表实际的宽度
    private int widthText = 50 * multi;// 图表左边显示价格的区域
    private int widthHead = 50;// 价格区域右边，图表左边的空白区
    private int widthFoot = 25 * multi;
    private int miles = 5;// 增长的毫秒数
    private int px = 10;// 每毫秒添加的像素数
    private boolean hasAnim = false;

    private double x1 = 0;
    private double x2 = 0;
    private double x3 = 0;
    private double x4 = 0;
    private double x5 = 0;

    private PointF p1 = new PointF();
    private PointF p2 = new PointF();
    private PointF p3 = new PointF();
    private PointF p4 = new PointF();
    private PointF p5 = new PointF();
    private float p2x;
    private float p3x;
    private float p4x;
    private float p5x;
    private float p2y;
    private float p3y;
    private float p4y;
    private float p5y;
    boolean p2Init = true;
    boolean isFirstRun = true;
    boolean x1Complete = true;
    boolean x2Complete = false;
    boolean x3Complete = false;
    boolean x4Complete = false;
    boolean x5Complete = false;
    private double min = 0d;
    private double max = 100000d;
    private PointF pic;
    private List<ChartBean> mChartBeanList = new ArrayList<ChartBean>();
    private double price;
    private String unit = "元/斤";
    private MyHandler handler;
    private Paint p;
    private float left;
    private float top;
    private float right;
    private float bottom;
    private int textWidth;

    public ChartView(Context context) {
        super(context);
        init();
    }

    public ChartView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public ChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        handler = new MyHandler();

    }

    public void setData(List<ChartBean> list, String unit, boolean hasAnim) {
        this.mChartBeanList = list;
        this.hasAnim = hasAnim;
        if ("".equals(unit)) {
            this.unit = unit;
        }
        // 4,6,2,3,5
        try {
            x1 = list.get(0).getPrice();
            x2 = list.get(1).getPrice();
            x3 = list.get(2).getPrice();
            x4 = list.get(3).getPrice();
            x5 = list.get(4).getPrice();
        } catch (Exception e) {
            e.printStackTrace();
        }
        max = list.get(0).getPrice();
        for (int i = 0; i < list.size(); i++) {
            if (max < list.get(i).getPrice()) {
                max = list.get(i).getPrice();
            }
        }
    }

    public void setMaxMin(double max, double min) {
    }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        p = new Paint();
        p.setAntiAlias(true);
        p.setColor(Color.GRAY);
        p.setTypeface(Typeface.DEFAULT);
        Path path = new Path();

        width = canvas.getWidth();
        height = canvas.getHeight();
        multi = (int) Math.ceil(width / 560);
        int width = canvas.getWidth();
        widthText = 50 * multi;// 图表左边显示价格的区域
        widthFoot = 25 * multi;
        radi = 5 * multi;

        heightTop = 0;
        heightReal = height - heightText - heightTop;
        heightTop = heightReal / 4;
        heightReal = height - heightText - heightTop;
        widthReal = ((int) width - widthText - widthHead - widthFoot);

        /** 画左边的价格文字 */
        p.setTextSize(17 * multi);
        canvas.drawText(String.format("%.2f", (min + (max - min))), widthText - 35 * multi, heightTop, p);
        canvas.drawText(String.format("%.2f", (min + (max - min) * 2 / 3)), widthText - 35 * multi, heightTop
                + heightReal / 3, p);
        canvas.drawText(String.format("%.2f", (min + (max - min) / 3)), widthText - 35 * multi, heightTop + heightReal
                * 2 / 3, p);
        canvas.drawText(unit, widthText - 35 * multi - 5, heightTop + heightReal + 5, p);
        /** 画底下的日期文字 */
        try {
            switch (mChartBeanList.size()) {
            case 5:
                canvas.drawText(mChartBeanList.get(4).getDate() + "", widthText + widthReal, 50 + heightTop
                        + heightReal, p);
            case 4:
                canvas.drawText(mChartBeanList.get(3).getDate() + "", widthText + widthReal * 3 / 4, 50 + heightTop
                        + heightReal, p);
            case 3:
                canvas.drawText(mChartBeanList.get(2).getDate() + "", widthText + widthReal / 2, 50 + heightTop
                        + heightReal, p);
            case 2:
                canvas.drawText(mChartBeanList.get(1).getDate() + "", widthText + widthReal / 4, 50 + heightTop
                        + heightReal, p);
            case 1:
                canvas.drawText(mChartBeanList.get(0).getDate() + "", widthText, 50 + heightTop + heightReal, p);
            case 0:
                break;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        p1.x = widthText + widthHead;
        p1.y = (float) (heightTop + getHeight(x1));
        p2.x = widthText + widthHead + widthReal / 4;
        p2.y = (float) (heightTop + getHeight(x2));
        p3.x = widthText + widthHead + widthReal / 2;
        p3.y = (float) (heightTop + getHeight(x3));
        p4.x = widthText + widthHead + widthReal * 3 / 4;
        p4.y = (float) (heightTop + getHeight(x4));
        p5.x = widthText + widthHead + widthReal;
        p5.y = (float) (heightTop + getHeight(x5));
        if (p2Init) {
            /** 初始化pp2 */
            p2x = p1.x;
            p2y = p1.y;
            p2Init = false;
        }

        /** 最底下的粗线 */
        p.setColor(Color.GRAY);
        p.setStrokeWidth(2);
        canvas.drawLine(widthText, heightTop + heightReal, (float) width, heightTop + heightReal, p);

        /** 画三根虚线 */
        p.setColor(Color.GRAY);
        p.setStrokeWidth(1);
        p.setStyle(Paint.Style.STROKE);
        PathEffect effects = new DashPathEffect(new float[] { 5, 5, 5, 5 }, 1);
        p.setPathEffect(effects);
        path.moveTo(widthText, heightTop + heightReal * 2 / 3);
        path.lineTo(width, heightTop + heightReal * 2 / 3);
        canvas.drawPath(path, p);
        path.moveTo(widthText, heightTop + heightReal / 3);
        path.lineTo(width, heightTop + heightReal / 3);
        canvas.drawPath(path, p);
        path.moveTo(widthText, heightTop);
        path.lineTo(width, heightTop);
        canvas.drawPath(path, p);
        p.setStyle(Paint.Style.FILL);
        p.setColor(getResources().getColor(R.color.green_chart));
        p.setStrokeWidth(3 * multi);
        /** 几个点连起来的折线 */
        try {
            switch (mChartBeanList.size()) {
            case 0:
                break;
            case 1:
                canvas.drawCircle(p1.x, p1.y, radi, p);
                if (pic == null) {
                    pic = new PointF();
                    pic = p1;
                    price = x1;
                }
                break;
            case 2:
                drawLine(canvas, p);
                canvas.drawCircle(p1.x, p1.y, radi, p);
                canvas.drawCircle(p2.x, p2.y, radi, p);
                if (pic == null) {
                    pic = new PointF();
                    pic = p2;
                    price = x2;
                }
                break;
            case 3:
                drawLine(canvas, p);
                canvas.drawCircle(p1.x, p1.y, radi, p);
                canvas.drawCircle(p2.x, p2.y, radi, p);
                canvas.drawCircle(p3.x, p3.y, radi, p);
                if (pic == null) {
                    pic = new PointF();
                    pic = p3;
                    price = x3;
                }
                break;
            case 4:
                drawLine(canvas, p);
                canvas.drawCircle(p1.x, p1.y, radi, p);
                canvas.drawCircle(p2.x, p2.y, radi, p);
                canvas.drawCircle(p3.x, p3.y, radi, p);
                canvas.drawCircle(p4.x, p4.y, radi, p);
                if (pic == null) {
                    pic = new PointF();
                    pic = p4;
                    price = x4;
                }
                break;
            case 5:
                drawLine(canvas, p);
                canvas.drawCircle(p1.x, p1.y, radi, p);
                canvas.drawCircle(p2.x, p2.y, radi, p);
                canvas.drawCircle(p3.x, p3.y, radi, p);
                canvas.drawCircle(p4.x, p4.y, radi, p);
                canvas.drawCircle(p5.x, p5.y, radi, p);
                if (pic == null) {
                    pic = new PointF();
                    pic = p5;
                    price = x5;
                }
                break;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        /** 画圆角矩形 */
        if (pic != null) {
            // p = new Paint();
            p.setAntiAlias(true);// 设置画笔的锯齿效果
            p.setPathEffect(new PathEffect());
            p.setColor(getResources().getColor(R.color.green_chart_dark));
            textWidth = getTextWidth(p, String.format("%.2f", price));
            left = pic.x - textWidth / 2;
            top = pic.y - 35 * multi;
            right = pic.x + textWidth / 2 + 5;
            bottom = pic.y - 15 * multi;
            RectF oval3 = new RectF(left, top, right, bottom);// 设置个新的长方形
            canvas.drawRoundRect(oval3, 10, 10, p);// 第二个參数是x半径。第三个參数是y半径
            path.moveTo(pic.x, pic.y - 5 * multi);
            path.lineTo((left + right) / 2 - 5 * multi, bottom);
            path.lineTo((left + right) / 2 + 5 * multi, bottom);
            path.lineTo(pic.x, pic.y - 5 * multi);
            canvas.drawPath(path, p);
            p.setColor(Color.WHITE);
            p.setTextSize(14 * multi);
            canvas.drawText(String.format("%.2f", price), pic.x - textWidth / 2 + 5, pic.y - 20 * multi, p);
        }

        if (hasAnim) {
            handler.sendEmptyMessageDelayed(0, miles);
        }
    }

    public static int getTextWidth(Paint paint, String str) {
        int iRet = 0;
        if (str != null && str.length() > 0) {
            int len = str.length();
            float[] widths = new float[len];
            paint.getTextWidths(str, widths);
            for (int j = 0; j < len; j++) {
                iRet += (int) Math.ceil(widths[j]);
            }
        }
        return iRet;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
        case MotionEvent.ACTION_MOVE:
            reFreshPic(event);
            break;
        case MotionEvent.ACTION_DOWN:
            reFreshPic(event);
            break;
        case MotionEvent.ACTION_UP:
            reFreshPic(event);
            break;
        }

        return super.onTouchEvent(event);
    }

    private void reFreshPic(MotionEvent event) {
        float x = event.getX();
        int[] location = new int[2];
        this.getLocationOnScreen(location);
        float offsetX = x - widthText - widthHead;
        if (offsetX < widthReal / 8) {
            pic = p1;
            price = x1;
        } else if (offsetX > widthReal / 8 && offsetX < widthReal * 3 / 8) {
            pic = p2;
            price = x2;
        } else if (offsetX > widthReal * 3 / 8 && offsetX < widthReal * 5 / 8) {
            pic = p3;
            price = x3;
        } else if (offsetX > widthReal * 5 / 8 && offsetX < widthReal * 7 / 8) {
            pic = p4;
            price = x4;
        } else if (offsetX > widthReal * 7 / 8) {
            pic = p5;
            price = x5;
        }
        this.invalidate();
    }

    /**
     * 依据传入的价格得到须要展示在view中的Y坐标
     *
     * max：最大值 min:最小值 height：图表的高度
     *
     * @param x
     * @return
     */
    public double getHeight(double x) {
        if (max - min == 0) {
            return 0;
        } else {
            return (max - x) / (max - min) * heightReal;
        }
    }

    public void drawLine(Canvas canvas, Paint p) {
        switch (mChartBeanList.size()) {
        case 0:
            break;
        case 1:
            break;
        case 2:
            if (hasAnim) {
                if (x1Complete) {
                    canvas.drawLine(p1.x, p1.y, p2x, p2y, p);
                }
            } else {
                canvas.drawLine(p1.x, p1.y, p2.x, p2.y, p);
            }
            break;
        case 3:
            if (hasAnim) {
                if (x1Complete) {
                    canvas.drawLine(p1.x, p1.y, p2x, p2y, p);
                }
                if (x2Complete) {
                    canvas.drawLine(p2x, p2y, p3x, p3y, p);
                }
            } else {
                canvas.drawLine(p1.x, p1.y, p2.x, p2.y, p);
                canvas.drawLine(p2.x, p2.y, p3.x, p3.y, p);
            }
            break;
        case 4:
            if (hasAnim) {
                if (x1Complete) {
                    canvas.drawLine(p1.x, p1.y, p2x, p2y, p);
                }
                if (x2Complete) {
                    canvas.drawLine(p2x, p2y, p3x, p3y, p);
                }
                if (x3Complete) {
                    canvas.drawLine(p3x, p3y, p4x, p4y, p);
                }
            } else {
                canvas.drawLine(p1.x, p1.y, p2.x, p2.y, p);
                canvas.drawLine(p2.x, p2.y, p3.x, p3.y, p);
                canvas.drawLine(p3.x, p3.y, p4.x, p4.y, p);
            }
            break;
        case 5:
            if (hasAnim) {
                if (x1Complete) {
                    canvas.drawLine(p1.x, p1.y, p2x, p2y, p);
                }
                if (x2Complete) {
                    canvas.drawLine(p2x, p2y, p3x, p3y, p);
                }
                if (x3Complete) {
                    canvas.drawLine(p3x, p3y, p4x, p4y, p);
                }
                if (x4Complete) {
                    canvas.drawLine(p4x, p4y, p5x, p5y, p);
                }
            } else {
                canvas.drawLine(p1.x, p1.y, p2.x, p2.y, p);
                canvas.drawLine(p2.x, p2.y, p3.x, p3.y, p);
                canvas.drawLine(p3.x, p3.y, p4.x, p4.y, p);
                canvas.drawLine(p4.x, p4.y, p5.x, p5.y, p);
            }
            break;
        }
    }

    class MyHandler extends Handler {
        public MyHandler() {
        }

        public MyHandler(Looper L) {
            super(L);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (p2x < p2.x) {
                p2x = p2x + px;
                p2y = p2y + (p2.y - p1.y) / (p2.x - p1.x) * px;
                // pp2.x++;
                // pp2.y = pp2.y + (p2.y - p1.y) / (p2.x - p1.x) * 1;
                x1Complete = true;
                ChartView.this.invalidate();
                p3x = p2x;
                System.out.println("p2y--" + p2y);
                p3y = p2y;
            } else if (p3x < p3.x) {
                p3x = p3x + px;
                p3y = p3y + (p3.y - p2.y) / (p3.x - p2.x) * px;
                System.out.println("2");
                // pp3.x = pp3.x + 1;
                // pp3.y = pp3.y + (p3.y - p2.y) / (p3.x - p2.x) * 1;
                ChartView.this.invalidate();
                x2Complete = true;
                p4x = p3x;
                p4y = p3y;
            } else if (p4x < p4.x) {
                System.out.println("3");
                p4x = p4x + px;
                p4y = p4y + (p4.y - p3.y) / (p4.x - p3.x) * px;
                // pp4.x = pp4.x + 1;
                // pp4.y = pp4.y + (p4.y - p3.y) / (p4.x - p3.x) * 1;
                ChartView.this.invalidate();
                x3Complete = true;
                p5x = p4x;
                p5y = p4y;
            } else if (p5x < p5.x) {
                p5x = p5x + px;
                System.out.println("4");
                p5y = p5y + (p5.y - p4.y) / (p5.x - p4.x) * px;
                // pp5.x = pp5.x + 1;
                // pp5.y = pp5.y + (p5.y - p4.y) / (p5.x - p4.x) * 1;
                ChartView.this.invalidate();
                x4Complete = true;
            } else {
                System.out.println("return");
                return;
            }
        }
    }
}

https://github.com/yocn/chartView​

版权声明：本文博客原创文章，博客，未经同意，不得转载。