android 图表控件的实现（一）

前段时间公司要做图表，本来想用个三方库就完事的，然而有很多个性化的实现，那就自己动手吧。先上图
实现的效果感觉还行，再有什么特殊的需求，自己写的东西，改起来也方便。

接下来是把图表功能涉及到的类都先抽象出来。

ChartData包下是绘图时要用到的数据。
Xvalues:X轴下每个点要绘制的东西，如上面柱状图中绘制的月份数据。
Yvalues：每个X轴坐标对应的Y轴数据点。
XaxisData: X坐标轴
YaxisData: Y坐标轴
ChartDataManager: 绘制图表可能需要以上数据的配合，所以，还要把上面的数据放到一个地方进行统一管理，这个类里包含了以上上面的所有数据。

ChartDrawUtil包下是每一中图的绘制工具
DrawUtil是绘制图表的基类和一些公用方法。绘制图表，我把它分割成了三个步骤
1.绘制X轴 ——-》2.绘制Y轴————-》3.绘制图表内容。
所以在基类里写了三个抽象方法

    abstract protected void startContent(Canvas canvas);
    abstract protected void drawXaxis(Canvas canvas);
    abstract protected void drawYaxis(Canvas canvas);

相应的子类实现对应的绘制就行了。

除了上面两个包里的类，剩下的就是实现好的图表类。

接下来就来看看图表的实现，上图中第一个，最简单的圆形进度控件CircleProgressChart

思路也很简单，先绘制一个底部的灰色圆环，再绘制上层的进度圆环，最后绘制中心文字。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(centerX,centerY,circirRudias,bottomCirclePaint);//底部圆环绘制
        float currentDegree=360*currentPercent;//通过进度百分比计算对应的弧度
        float left=centerX-circirRudias;
        float top=centerY-circirRudias;
        float right=centerX+circirRudias;
        float bottom=centerY+circirRudias;
        RectF rectF=new RectF(left,top,right,bottom);
        canvas.drawArc(rectF,-90,currentDegree,false,topCirclePaint);//绘制对应的进度弧度
        int percentText= (int) (currentPercent*100);
        String drawtext=percentText+"%";
        Paint.FontMetrics metrics=textPaint.getFontMetrics();
        float textwidth= textPaint.measureText(drawtext);
        float textX=(getMeasuredWidth()-textwidth)/2;               //文字X坐标点计算
        float textY=centerY-(metrics.ascent+metrics.descent)/2;     //文字Y坐标点计算
        canvas.drawText(drawtext,textX,textY,textPaint);
    }

这个实在太简单了，还没用上上面设计的数据结构，不过接下来的图表会用到。

第二个图是含有多个种类的圆环图

这个图的实现也是很简单，显然，它要有一个各个种类的数据集合，我是用Yvalues来表示一个种类。

public class MultiTypeCircleProgressChart extends View {

    private int centerX,centerY;
    private int circirRudias;
    Paint textPaint,bottomCirclePaint,topCirclePaint;
    int bottomCircleColor=Color.GRAY,topCirlceColor= Color.RED,textColor=Color.BLACK;
    float currentPercent=0.50f;
    float circleWidth=20;
    float textSize=30;
    List<Yvalues> allTypeValues;//图包含的种类集合
    List<Integer> allTypeDegree;//不同种类的对应的弧度集合

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

    public MultiTypeCircleProgressChart(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public MultiTypeCircleProgressChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context){
        textPaint=new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setDither(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);

        bottomCirclePaint=new Paint();
        bottomCirclePaint.setAntiAlias(true);
        bottomCirclePaint.setDither(true);
        bottomCirclePaint.setColor(bottomCircleColor);
        bottomCirclePaint.setStrokeWidth(circleWidth);
        bottomCirclePaint.setStyle(Paint.Style.STROKE);

        topCirclePaint=new Paint();
        topCirclePaint.setAntiAlias(true);
        topCirclePaint.setDither(true);
        topCirclePaint.setColor(topCirlceColor);
        topCirclePaint.setStrokeWidth(circleWidth);
        topCirclePaint.setStyle(Paint.Style.STROKE);
        allTypeDegree=new ArrayList<>();
        allTypeValues=new ArrayList<>();
    }
    //这个方法是计算不同种类对应的弧度
    private   List<Integer> getRelativeDegree(List<Yvalues> yvaluesList){
       List<Integer> relativeDegree=new ArrayList<>();
        int size=yvaluesList.size();
        int totalValues=0;
        for(int i=0;i<size;i++){
            totalValues+=yvaluesList.get(i).getValue();
        }
        for(int i=0;i<size;i++){
            int degree= (int) (360*yvaluesList.get(i).getValue()*1.0f/totalValues);
            relativeDegree.add(degree);
        }
        return relativeDegree;
    }


    public void updateView(List<Yvalues> yvaluesList){
        this.allTypeValues=yvaluesList;
        this.allTypeDegree=getRelativeDegree(yvaluesList);
        invalidate();
    }



    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       centerX=getMeasuredWidth()/2;
       centerY=getMeasuredHeight()/2;
        circirRudias=Math.min(centerX,centerY)-30;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int startDegree=-90;//圆环绘制的起点从12点钟方向开始
        canvas.drawCircle(centerX,centerY,circirRudias,bottomCirclePaint);
        float left=centerX-circirRudias;
        float top=centerY-circirRudias;
        float right=centerX+circirRudias;
        float bottom=centerY+circirRudias;
        RectF rectF=new RectF(left,top,right,bottom);
        int size=allTypeValues.size();
        for(int i=0;i<size;i++){
            topCirclePaint.setColor(allTypeValues.get(i).getTextcolor());
            canvas.drawArc(rectF,startDegree,allTypeDegree.get(i),false,topCirclePaint);
            startDegree+=allTypeDegree.get(i);
        }
    }
}

小知识点提示：
1.绘制底部圆的时候，设置画笔描边属性： bottomCirclePaint.setStyle(Paint.Style.STROKE);
2.绘制弧度首尾两头半圆装的属性：topCirclePaint.setStrokeCap(Paint.Cap.ROUND);
3.绘制弧度起点设为0的话，起点对应的是3点钟方向，我这里写成-90是对应的就是12点方向。
4.让文字居中的坐标点计算原理参考 http://blog.csdn.net/doctorzhong/article/details/53079511。