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<Fragment> 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<Fragment>();
		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();
		}
	}

}

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