Android雷达图（蜘蛛网图） _Android

智慧并不产生于学历,而是来自对于知识的终生不懈的追求。这篇文章主要讲述Android雷达图（蜘蛛网图）相关的知识，希望能为你提供帮助。
简介
最近因为项目的需要，需要实现雷达图来展示各科目的对题率。
雷达图的绘制不算复杂，只要按照一定流程来绘制就可以了，其中使用的最多的是path路径类，使用这个类便于我们绘制出多边形等效果。
效果图如下：

文章图片

使用方式
使用方式很简单，直接在布局文件里面使用这个控件，记得设置一个合适的大小就可以。
当然也有开放一些public方法,可以进行数据、文本颜色等设置。

/** * 设置数据 * @param points */ public void setData(ArrayList< LastPoint> points){}/** * 设置文本 * @param titles */ public void setTitles(String[] titles){}/** * 设置圈数 * @param count */ public void setCount(int count){}/** * 设置网格线颜色 * @param color */ public void setLineColor(int color){}/** * 设置填充区域颜色 * @param color */ public void setValueColor(int color){}/** * 设置文本颜色 * @param color */ public void setTextColor(int color){}

具体实现
【Android雷达图（蜘蛛网图）】一般自定义控件的流程有以下几个步骤（个人观点）：

* 1、构造函数（初始化）
* 2、onMeasure（测量大小）
* 3、onSizeChanged（确定大小）
* 4、onLayout（子view的位置，如果包含子view的话）
* 5、onDraw（绘制内容）
* 6、暴露给外部的接口

在该控件中，2、4都不用考虑，只要确定了大小（onSizeChanged），就能够计算出整个布局的中心，雷达图是以这个中心开始绘制的。

@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; mCenterX = mWidth/2; mCenterY = mHeight/2; mRadius = (Math.min(mWidth,mHeight)/2 * 0.9f); postInvalidate(); }

绘制蜘蛛网图

/** * 画网格 * @param canvas */ private void drawLine(Canvas canvas){ Path path = new Path(); //网格线之间的间距 float distance =mRadius / (mCount-1); for (int i = 0; i < mCount; i++){//外面的网格图形 float currentRadius = i * distance; //当前半径 if (i == mCount -1){ //存储最后一圈网格的点的坐标 mLastPoints.add(new LastPoint(currentRadius,0)); mLastPoints.add(new LastPoint(currentRadius/2,-currentRadius)); mLastPoints.add(new LastPoint(-currentRadius/2,-currentRadius)); mLastPoints.add(new LastPoint(-currentRadius,0)); mLastPoints.add(new LastPoint(-currentRadius/2,currentRadius)); mLastPoints.add(new LastPoint(currentRadius/2,currentRadius)); } //6个点坐标组成一个网格图形 path.lineTo(currentRadius,0); //设置上一次操作的坐标点 path.moveTo(currentRadius,0); path.lineTo(currentRadius/2,-currentRadius); path.lineTo(-currentRadius/2,-currentRadius); path.lineTo(-currentRadius,0); path.lineTo(-currentRadius/2,currentRadius); path.lineTo(currentRadius/2,currentRadius); path.close(); canvas.drawPath(path,mLinePaint); } }

文章图片

绘制从中心到末端的直线

/** * 画网格对角线 * @param canvas */ private void drawGridLine(Canvas canvas){ Path path = new Path(); for (int i = 0; i < mLastPoints.size(); i++){ path.reset(); LastPoint point = mLastPoints.get(i); float x = point.x; float y = point.y; path.lineTo(x, y); canvas.drawPath(path, mLinePaint); } }

文章图片

绘制末端文本
由于文本与末端有一定的距离，所以需要加上一定的偏移量；当文本在网格左边显示的时候，会与网格有重叠，所以需要先计算文本长度，然后再向左边偏移对应的距离，这样就可以解决重叠问题。

/** * 画文本 * @param canvas */ private void drawText(Canvas canvas){ for (int i = 0; i < mLastPoints.size(); i++){ //文本长度 float dis = mTextPaint.measureText(mTitles[i]); LastPoint point = mLastPoints.get(i); float x = point.x; float y = point.y; if (i == 2 || i == 3 || i == 4){ //左边绘制文本：文本显示在坐标左边 x = x - dis; } if (y > 0){ y+=18; } canvas.drawText(mTitles[i],x,y,mTextPaint); } }

文章图片

绘制填充区域

/** * 画数据线:填充区域 * @param canvas */ private void drawDataLine(Canvas canvas){ if (mDataPoints == null || mDataPoints.size() == 0) return; Path path = new Path(); for (int i = 0; i < mDataPoints.size(); i++){ LastPoint point = mDataPoints.get(i); float x = point.x; float y = point.y; path.lineTo(x, y); if (i == 0){//将上一次操作点移到第一个点坐标，保证最后调用close，形成一个封闭的形状 path.moveTo(x,y); } mValuePaint.setAlpha(255); //画小圆点 canvas.drawCircle(x,y,8,mValuePaint); } path.close(); mValuePaint.setAlpha(127); canvas.drawPath(path, mValuePaint); }

文章图片

最后，贴上完整的源代码：

package com.ha.cjy.myproject.view.widget; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View; import java.util.ArrayList; /** * 自定义雷达图 * 1、构造函数（初始化） * 2、onMeasure（测量大小） * 3、onSizeChanged（确定大小） * 4、onLayout（子view的位置，如果包含子view的话） * 5、onDraw（绘制内容） * 6、暴露给外部的接口 * Created by cjy on 17/8/15. */public class CustomRadarView extends View { //宽度 private int mWidth; //高度 private int mHeight; //原点坐标 private int mCenterX; private int mCenterY; //网格半径 private float mRadius; //网格圈数 private int mCount = 10; //Paint private Paint mLinePaint; private Paint mValuePaint; private Paint mTextPaint; //颜色值 private int mLineColor = Color.GRAY; private int mValueColor = Color.BLUE; private int mTextColor = Color.BLACK; //最后一圈网格坐标点集合 private ArrayList< LastPoint> mLastPoints = new ArrayList< LastPoint> (); //数据坐标点集合 private ArrayList< LastPoint> mDataPoints = new ArrayList< LastPoint> (); //文本集合 private String[] mTitles = new String[]{"科目A","科目A1","科目1","科目D","科目E","科目F"}; public CustomRadarView(Context context) { super(context); init(context); }public CustomRadarView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(context); }public CustomRadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); }@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; //中心坐标 mCenterX = mWidth/2; mCenterY = mHeight/2; mRadius = (Math.min(mWidth,mHeight)/2 * 0.9f); postInvalidate(); }private void init(Context context){ mLinePaint = new Paint(); mLinePaint.setStyle(Paint.Style.STROKE); mLinePaint.setStrokeWidth(2); mLinePaint.setColor(mLineColor); mValuePaint = new Paint(); mValuePaint.setStyle(Paint.Style.FILL_AND_STROKE); mValuePaint.setStrokeWidth(2); mValuePaint.setColor(mValueColor); mTextPaint = new Paint(); mTextPaint.setStyle(Paint.Style.STROKE); mTextPaint.setStrokeWidth(2); mTextPaint.setColor(mTextColor); mTextPaint.setTextSize(28); mTextPaint.setAntiAlias(true); }@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //移动原点坐标 canvas.translate(mCenterX,mCenterY); //画网格线 drawLine(canvas); //画网格对角线 drawGridLine(canvas); //画文本 drawText(canvas); //画数据线 drawDataLine(canvas); }/** * 画网格 * @param canvas */ private void drawLine(Canvas canvas){ Path path = new Path(); //网格线之间的间距 float distance =mRadius / (mCount-1); for (int i = 0; i < mCount; i++){//外面的网格图形 float currentRadius = i * distance; //当前半径 if (i == mCount -1){ //存储最后一圈网格的点的坐标 mLastPoints.add(new LastPoint(currentRadius,0)); mLastPoints.add(new LastPoint(currentRadius/2,-currentRadius)); mLastPoints.add(new LastPoint(-currentRadius/2,-currentRadius)); mLastPoints.add(new LastPoint(-currentRadius,0)); mLastPoints.add(new LastPoint(-currentRadius/2,currentRadius)); mLastPoints.add(new LastPoint(currentRadius/2,currentRadius)); } //6个点坐标组成一个网格图形 path.lineTo(currentRadius,0); //设置上一次操作的坐标点 path.moveTo(currentRadius,0); path.lineTo(currentRadius/2,-currentRadius); path.lineTo(-currentRadius/2,-currentRadius); path.lineTo(-currentRadius,0); path.lineTo(-currentRadius/2,currentRadius); path.lineTo(currentRadius/2,currentRadius); path.close(); canvas.drawPath(path,mLinePaint); } }/** * 画网格对角线 * @param canvas */ private void drawGridLine(Canvas canvas){ Path path = new Path(); for (int i = 0; i < mLastPoints.size(); i++){ path.reset(); LastPoint point = mLastPoints.get(i); float x = point.x; float y = point.y; path.lineTo(x, y); canvas.drawPath(path, mLinePaint); } }/** * 画文本 * @param canvas */ private void drawText(Canvas canvas){ for (int i = 0; i < mLastPoints.size(); i++){ //文本长度 float dis = mTextPaint.measureText(mTitles[i]); LastPoint point = mLastPoints.get(i); float x = point.x; float y = point.y; if (i == 2 || i == 3 || i == 4){ //左边绘制文本：文本显示在坐标左边 x = x - dis; } if (y > 0){ y+=18; } canvas.drawText(mTitles[i],x,y,mTextPaint); } }/** * 画数据线:填充区域 * @param canvas */ private void drawDataLine(Canvas canvas){ if (mDataPoints == null || mDataPoints.size() == 0) return; Path path = new Path(); for (int i = 0; i < mDataPoints.size(); i++){ LastPoint point = mDataPoints.get(i); float x = point.x; float y = point.y; path.lineTo(x, y); if (i == 0){//将上一次操作点移到第一个点坐标，保证最后调用close，形成一个封闭的形状 path.moveTo(x,y); } mValuePaint.setAlpha(255); //画小圆点 canvas.drawCircle(x,y,8,mValuePaint); } path.close(); mValuePaint.setAlpha(127); canvas.drawPath(path, mValuePaint); }/** * 设置数据 * @param points */ public void setData(ArrayList< LastPoint> points){ mDataPoints = points; invalidate(); }/** * 设置文本 * @param titles */ public void setTitles(String[] titles){ mTitles = titles; invalidate(); }/** * 设置圈数 * @param count */ public void setCount(int count){ mCount = count; invalidate(); }/** * 设置网格线颜色 * @param color */ public void setLineColor(int color){ mLineColor = color; mLinePaint.setColor(mLineColor); invalidate(); }/** * 设置填充区域颜色 * @param color */ public void setValueColor(int color){ mValueColor = color; mValuePaint.setColor(mValueColor); invalidate(); }/** * 设置文本颜色 * @param color */ public void setTextColor(int color){ mTextColor = color; mTextPaint.setColor(mTextColor); invalidate(); }/** * 坐标点 */ public static class LastPoint { private float x; private float y; public LastPoint(float x, float y) { this.x = x; this.y = y; } } }