Android自定义统计图(柱状图，折线图，饼状图)

最近由于项目需要，研究了一些统计图的做法，开始时，看了很多博文，大部分都是引用第三方的库，虽然简单，

易上手，但是功能太死板，有很多要求都是不能满足的，所以经过研究，自己使用View中的canvas重新绘图制作

统计图。首先上几张的效果图吧。

点击这里下载（0分下载）

一、demo的结构

一个activity中嵌套了三个fragment(v4)，是用viewpager对页面进行滑动，下面是整个项目的结构：

二、核心代码

首先是MainActivity，这个demo中只使用到一个activity，现在一个activity中镶嵌多个fragment很火，

很多Android应用都在使用这个布局，例如微信，QQ等。这样做节省了空间上的浪费。

package com.example.statisticalchart;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private List fragments;
    private FragmentPagerAdapter adapter;
    // 设置是否显示动画，为了防止在创建时就开启动画，用以下三个参数做了判断，只有当看到视图后才会显示动画
    public static int flag1 = 2;
    public static int flag2 = 1;
    public static int flag3 = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.record_viewpager);
        fragments = new ArrayList();
        RecordPager1 recordPager1 = new RecordPager1();
        RecordPager2 recordPager2 = new RecordPager2();
        RecordPager3 recordPager3 = new RecordPager3();
        fragments.add(recordPager1);
        fragments.add(recordPager2);
        fragments.add(recordPager3);

        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }
        };
        viewPager.setAdapter(adapter);

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position == 0 && flag1 == 1) {
                    flag1 = 2;
                    fragments.get(0).onResume();
                    flag1 = 3;
                }
                if (position == 1 && flag2 == 1) {
                    flag2 = 2;
                    fragments.get(1).onResume();
                    flag2 = 3;

                }
                if (position == 2 && flag3 == 1) {
                    flag3 = 2;
                    fragments.get(2).onResume();
                    flag3 = 3;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

}

接下来是这个项目中最主要的三个类：HistogramView、LineChartView、PinChart。这三个类继承View类，重新构图，分别画成了柱状图，折线图，饼状图，然后给出三个类的代码：

package com.example.statisticalchart;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Rect;
import android.os.Looper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class HistogramView extends View {

    private Paint xLinePaint;// 坐标轴 轴线 画笔：
    private Paint hLinePaint;// 坐标轴水平内部 虚线画笔
    private Paint titlePaint;// 绘制文本的画笔
    private Paint paint;// 矩形画笔 柱状图的样式信息
    private int[] progress = { 2000, 5000, 6000, 8000, 500, 6000, 9000 };// 7
                                                                            // 条，显示各个柱状的数据
    private int[] aniProgress;// 实现动画的值
    private final int TRUE = 1;// 在柱状图上显示数字
    private int[] text;// 设置点击事件，显示哪一条柱状的信息
    private Bitmap bitmap;
    // 坐标轴左侧的数标
    private String[] ySteps;
    // 坐标轴底部的星期数
    private String[] xWeeks;
    private int flag;// 是否使用动画

    private HistogramAnimation ani;

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

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

    private void init() {

        ySteps = new String[] { "10k", "7.5k", "5k", "2.5k", "0" };
        xWeeks = new String[] { "周一", "周二", "周三", "周四", "周五", "周六", "周日" };
        text = new int[] { 0, 0, 0, 0, 0, 0, 0 };
        aniProgress = new int[] { 0, 0, 0, 0, 0, 0, 0 };
        ani = new HistogramAnimation();
        ani.setDuration(2000);

        xLinePaint = new Paint();
        hLinePaint = new Paint();
        titlePaint = new Paint();
        paint = new Paint();

        // 给画笔设置颜色
        xLinePaint.setColor(Color.DKGRAY);
        hLinePaint.setColor(Color.LTGRAY);
        titlePaint.setColor(Color.BLACK);

        // 加载画图
        bitmap = BitmapFactory
                .decodeResource(getResources(), R.drawable.column);
    }

    public void start(int flag) {
        this.flag = flag;
        this.startAnimation(ani);
    }

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

        int width = getWidth();
        int height = getHeight() - dp2px(50);
        // 绘制底部的线条
        canvas.drawLine(dp2px(30), height + dp2px(3), width - dp2px(30), height
                + dp2px(3), xLinePaint);

        int leftHeight = height - dp2px(5);// 左侧外周的 需要划分的高度：

        int hPerHeight = leftHeight / 4;// 分成四部分

        hLinePaint.setTextAlign(Align.CENTER);
        // 设置四条虚线
        for (int i = 0; i < 4; i++) {
            canvas.drawLine(dp2px(30), dp2px(10) + i * hPerHeight, width
                    - dp2px(30), dp2px(10) + i * hPerHeight, hLinePaint);
        }

        // 绘制 Y 周坐标
        titlePaint.setTextAlign(Align.RIGHT);
        titlePaint.setTextSize(sp2px(12));
        titlePaint.setAntiAlias(true);
        titlePaint.setStyle(Paint.Style.FILL);
        // 设置左部的数字
        for (int i = 0; i < ySteps.length; i++) {
            canvas.drawText(ySteps[i], dp2px(25), dp2px(13) + i * hPerHeight,
                    titlePaint);
        }

        // 绘制 X 周 做坐标
        int xAxisLength = width - dp2px(30);
        int columCount = xWeeks.length + 1;
        int step = xAxisLength / columCount;

        // 设置底部的数字
        for (int i = 0; i < columCount - 1; i++) {
            // text, baseX, baseY, textPaint
            canvas.drawText(xWeeks[i], dp2px(25) + step * (i + 1), height
                    + dp2px(20), titlePaint);
        }

        // 绘制矩形
        if (aniProgress != null && aniProgress.length > 0) {
            for (int i = 0; i < aniProgress.length; i++) {// 循环遍历将7条柱状图形画出来
                int value = aniProgress[i];
                paint.setAntiAlias(true);// 抗锯齿效果
                paint.setStyle(Paint.Style.FILL);
                paint.setTextSize(sp2px(15));// 字体大小
                paint.setColor(Color.parseColor("#6DCAEC"));// 字体颜色
                Rect rect = new Rect();// 柱状图的形状

                rect.left = step * (i + 1);
                rect.right = dp2px(30) + step * (i + 1);
                int rh = (int) (leftHeight - leftHeight * (value / 10000.0));
                rect.top = rh + dp2px(10);
                rect.bottom = height;

                canvas.drawBitmap(bitmap, null, rect, paint);
                // 是否显示柱状图上方的数字
                if (this.text[i] == TRUE) {
                    canvas.drawText(value + "", dp2px(15) + step * (i + 1)
                            - dp2px(15), rh + dp2px(5), paint);
                }

            }
        }

    }

    private int dp2px(int value) {
        float v = getContext().getResources().getDisplayMetrics().density;
        return (int) (v * value + 0.5f);
    }

    private int sp2px(int value) {
        float v = getContext().getResources().getDisplayMetrics().scaledDensity;
        return (int) (v * value + 0.5f);
    }

    /**
     * 设置点击事件，是否显示数字
     */
    public boolean onTouchEvent(MotionEvent event) {
        int step = (getWidth() - dp2px(30)) / 8;
        int x = (int) event.getX();
        for (int i = 0; i < 7; i++) {
            if (x > (dp2px(15) + step * (i + 1) - dp2px(15))
                    && x < (dp2px(15) + step * (i + 1) + dp2px(15))) {
                text[i] = 1;
                for (int j = 0; j < 7; j++) {
                    if (i != j) {
                        text[j] = 0;
                    }
                }
                if (Looper.getMainLooper() == Looper.myLooper()) {
                    invalidate();
                } else {
                    postInvalidate();
                }
            }
        }
        return super.onTouchEvent(event);
    }

    /**
     * 集成animation的一个动画类
     *
     * @author 李垭超
     */
    private class HistogramAnimation extends Animation {
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime < 1.0f && flag == 2) {
                for (int i = 0; i < aniProgress.length; i++) {
                    aniProgress[i] = (int) (progress[i] * interpolatedTime);
                }
            } else {
                for (int i = 0; i < aniProgress.length; i++) {
                    aniProgress[i] = progress[i];
                }
            }
            invalidate();
        }
    }

}

package com.example.statisticalchart;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class LineChartView extends View {

    private Paint rectPaint;// 设置左侧为白色，显示数表
    private Paint hLinePaint;// 坐标轴水平内部 虚线画笔
    private Paint titlePaint;// 绘制文本的画笔
    private Paint linePaint;
    private Paint paint;// 矩形画笔 柱状图的样式信息
    private int[] text;// 折线的转折点
    int x, y, preX, preY;
    // 坐标轴左侧的数标
    private Bitmap mBitmap;
    // 坐标轴底部的星期数
    private String[] str = { "62", "72", "82", "92", "102", "112", "122",
            "132", "142" };

    private HistogramAnimation ani;
    private int flag;

    public LineChartView(Context context) {
        super(context);
        init(context, null);
    }

    public LineChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {

        text = new int[] { 6, 5, 5, 4, 5, 3, 2, 3, 1, 1 };

        ani = new HistogramAnimation();
        ani.setDuration(4000);

        rectPaint = new Paint();
        titlePaint = new Paint();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        linePaint = new Paint();

        //
        titlePaint.setAntiAlias(true);
        Rect bundle1 = new Rect();

        Rect bundle2 = new Rect();
        hLinePaint = new Paint();

        int perWidth = getWidth() / 10;// 将宽度分为10部分
        int hPerHeight = getHeight() / 10;// 将高度分为10部分
        rectPaint.setColor(Color.WHITE);

        canvas.drawRect(0, 0, dp2px(30), getHeight(), rectPaint);// 画一块白色区域

        Path path = new Path();// 折线图的路径
        mBitmap = Bitmap.createBitmap(getWidth(), getHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas mCanvas = new Canvas(mBitmap);

        for (int i = 0; i < 10; i++) {// 画x线，并在左侧显示相应的数值
            hLinePaint.setTextAlign(Align.CENTER);
            hLinePaint.setColor(Color.WHITE);
            y = i * hPerHeight;
            if (i == 2) {
                hLinePaint.setStrokeWidth(4);
                for (int j = 0; j < 10; j++) {
                    canvas.drawLine(dp2px(30) + j * perWidth, y, dp2px(28)
                            + (j + 1) * perWidth, y, hLinePaint);
                }
                titlePaint.setTextSize(sp2px(20));
                titlePaint.getTextBounds(str[i - 1], 0, str[i - 1].length(),
                        bundle1);
                canvas.drawText(str[i - 1], dp2px(25) - bundle1.width(), i
                        * hPerHeight + (bundle1.height() / 2), titlePaint);
            } else {
                hLinePaint.setStrokeWidth(1);
                canvas.drawLine(dp2px(30), y, getWidth(), y, hLinePaint);
                if (i != 0) {
                    titlePaint.setTextSize(sp2px(15));
                    titlePaint.getTextBounds(str[i - 1], 0,
                            str[i - 1].length(), bundle2);
                    canvas.drawText(str[i - 1], dp2px(25) - bundle2.width(), i
                            * hPerHeight + (bundle2.height() / 2), titlePaint);
                }
            }

            x = i * perWidth + dp2px(30);
            if (i == 0) {
                path.moveTo(x, text[i] * hPerHeight);
            } else {
                path.lineTo(x, text[i] * hPerHeight);
            }
            linePaint.setColor(Color.parseColor("#bb2222"));
            linePaint.setAntiAlias(true);

            paint = new Paint();
            paint.setColor(Color.RED);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(dp2px(1));
            if (i != 0) {
                mCanvas.drawCircle(x, text[i] * hPerHeight, dp2px(3), linePaint);
            }
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
            mCanvas.drawPath(path, paint);
        }

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        paint.setStyle(Paint.Style.FILL);

        mCanvas.drawRect(preX + dp2px(30), 0, getWidth(), getHeight(), paint);
        canvas.drawBitmap(mBitmap, 0, 0, null);
        // Log.i("tag", "onDraw()1111");
    }

    private int dp2px(int value) {
        float v = getContext().getResources().getDisplayMetrics().density;
        return (int) (v * value + 0.5f);
    }

    private int sp2px(int value) {
        float v = getContext().getResources().getDisplayMetrics().scaledDensity;
        return (int) (v * value + 0.5f);
    }

    public void start(int flag) {
        startAnimation(ani);
        this.flag = flag;
    }

    /**
     * 集成animation的一个动画类
     *
     * @author
     */
    private class HistogramAnimation extends Animation {
        @Override
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime < 1.0f && flag == 2) {
                preX = (int) ((getWidth() - dp2px(30)) * interpolatedTime);
            } else {

                preX = getWidth();

            }
            invalidate();
        }
    }

}

package com.example.statisticalchart;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class PinChart extends View {

    static Canvas c;
    private Paint[] mPaints;
    private RectF mBigOval;
    float[] mSweep = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
    private int preWidth;
    private mAnimation ani;
    private int flag;
    private int centerX;
    private int centerY;
    int valueX;
    int valueY;

    public static float[] humidity = { 110, 60, 50, 50, 40, 30, 10, 10 };
    private String str[] = { "数据24%", "数据19%", "数据21%", "其他18%", "数据3%",
            "数据3%", "数据4%", "数据6%" };

    private final String color[] = { "#2cbae7", "#ffa500", "#ff5b3b",
            "#9fa0a4", "#6a71e5", "#f83f5d", "#64a300", "#64ef85" };

    public PinChart(Context context) {
        super(context);
        initView();
    }

    public PinChart(Context context, AttributeSet atr) {
        super(context, atr);
        initView();
    }

    private void initView() {
        ani = new mAnimation();
        ani.setDuration(2000);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.TRANSPARENT);// 设置背景颜色(透明)
        mPaints = new Paint[humidity.length];

        for (int i = 0; i < humidity.length; i++) {
            mPaints[i] = new Paint();
            mPaints[i].setAntiAlias(true);
            mPaints[i].setStyle(Paint.Style.FILL);
            mPaints[i].setColor(Color.parseColor(color[i]));
        }
        int cicleWidth = getWidth() - dp2px(60);
        centerX = getWidth() / 2;
        centerY = dp2px(10) + cicleWidth / 2;
        preWidth = (getWidth() - dp2px(40)) / 4;
        int half = getWidth() / 2;

        mBigOval = new RectF();// 饼图的四周边界
        mBigOval.top = dp2px(10);
        mBigOval.left = half - cicleWidth / 2;
        mBigOval.bottom = dp2px(10) + cicleWidth;
        mBigOval.right = half + cicleWidth / 2;

        float start = -180;
        Rect bounds = new Rect();
        for (int i = 0; i < humidity.length; i++) {
            canvas.drawArc(mBigOval, start, mSweep[i], true, mPaints[i]);
            if (humidity[i] > 45) {
                mPaints[i].setXfermode(new PorterDuffXfermode(
                        PorterDuff.Mode.SRC_OVER));
                mPaints[i].setAntiAlias(true);
                mPaints[i].setColor(Color.WHITE);
                mPaints[i].getTextBounds(str[i], 0, str[i].length(), bounds);
                mPaints[i].setTextSize(sp2px(15));
                measureText(start + 180, humidity[i], cicleWidth / 3, i);
                canvas.drawText(str[i], valueX - mPaints[i].measureText(str[i])
                        / 2, valueY + bounds.height() / 2, mPaints[i]);
            }
            start += humidity[i];
            int j = 1;
            int k;
            if (i < 4) {
                j = 0;
                k = i;
            } else {
                j = 1;
                k = i - 4;
            }
            mPaints[i] = new Paint();
            mPaints[i].setAntiAlias(true);
            mPaints[i].setStyle(Paint.Style.FILL);
            mPaints[i].setColor(Color.parseColor(color[i]));
            canvas.drawRect(new RectF(dp2px(20) + preWidth * k, cicleWidth
                    + dp2px(j * 30 + 20), dp2px(20) + preWidth * (k + 1),
                    cicleWidth + dp2px(50 + j * 30)), mPaints[i]);
            mPaints[i].setXfermode(new PorterDuffXfermode(
                    PorterDuff.Mode.SRC_OVER));
            mPaints[i].setAntiAlias(true);
            mPaints[i].setColor(Color.WHITE);
            mPaints[i].getTextBounds(str[i], 0, str[i].length(), bounds);
            mPaints[i].setTextSize(sp2px(15));
            canvas.drawText(str[i], dp2px(20) + preWidth * k + preWidth / 2
                    - mPaints[i].measureText(str[i]) / 2, cicleWidth
                    + dp2px(j * 30 + 20)
                    + (dp2px(30) / 2 + bounds.height() / 2), mPaints[i]);
        }
    }

    /**
     * 显示相应区域字开始的x,y坐标
     *
     * @param start
     * @param angle
     * @param radius
     * @param i
     */
    private void measureText(float start, float angle, int radius, int i) {
        float temp = start + (angle / 2);

        if (temp < 90) {
            valueX = (int) (centerX - Math.abs(radius
                    * Math.sin((temp / 180) * Math.PI)));
            valueY = (int) (centerY - Math.abs(radius
                    * Math.cos((temp / 180) * Math.PI)));
        } else if (temp > 90 && temp < 180) {
            temp = 180 - temp;
            valueX = centerX
                    + (int) Math
                            .abs((radius * Math.cos((temp / 180) * Math.PI)));
            valueY = centerY
                    - (int) Math
                            .abs((radius * Math.sin((temp / 180) * Math.PI)));
        } else if (temp > 180 && temp < 270) {
            temp = temp - 180;
            valueX = centerX
                    + (int) Math
                            .abs((radius * Math.cos((temp / 180) * Math.PI)));
            valueY = centerY
                    + (int) Math
                            .abs((radius * Math.sin((temp / 180) * Math.PI)));
        } else {
            temp = 360 - temp;
            valueX = centerX
                    - (int) Math
                            .abs((radius * Math.cos((temp / 180) * Math.PI)));
            valueY = centerY
                    + (int) Math
                            .abs((radius * Math.sin((temp / 180) * Math.PI)));
        }

    }

    private int sp2px(int value) {
        float v = getResources().getDisplayMetrics().scaledDensity;
        return (int) (value * v + 0.5f);
    }

    private int dp2px(int value) {
        float v = getResources().getDisplayMetrics().density;
        return (int) (value * v + 0.5f);
    }

    public void start(int flag) {
        startAnimation(ani);
        this.flag = flag;
    }

    class mAnimation extends Animation {
        @Override
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime < 1.0f && flag == 2) {
                for (int i = 0; i < humidity.length; i++) {
                    mSweep[i] = humidity[i] * interpolatedTime;
                }
            } else if (flag == 1) {
                for (int i = 0; i < humidity.length; i++) {
                    mSweep[i] = 0;
                }
            } else {
                for (int i = 0; i < humidity.length; i++) {
                    mSweep[i] = humidity[i];
                }
            }
            invalidate();
        }
    }

}

以上都是核心代码，并不是全部的代码，起他部分的代码就不贴出来了，感兴趣的朋友可以下载来研究研究。