前段时间公司要做图表,本来想用个三方库就完事的,然而有很多个性化的实现,那就自己动手吧。先上图
实现的效果感觉还行,再有什么特殊的需求,自己写的东西,改起来也方便。
接下来是把图表功能涉及到的类都先抽象出来。
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。