自定义雷达图

雷达图修改自网络https://github.com/jutao/AndroidNode/blob/master/2017/2017.3

效果图如下:

1

使用方法举例:

List datas =new ArrayList<>();

datas.add(new RadarView.ItemInfo("11",0));

datas.add(new RadarView.ItemInfo("22",0));

datas.add(new RadarView.ItemInfo("33",0));

datas.add(new RadarView.ItemInfo("44",0));

datas.add(new RadarView.ItemInfo("55",0));

viewHolder.myRadarview.setMaxValue(5);

viewHolder.myRadarview.setDatas(datas);

if (mTopList.size() !=0) {

viewHolder.myRadarview.updateDatas(mTopList);

}

以下为自定义RadarView

public class RadarView extends View {

private ContextmContext;

private static final StringTAG ="RadarView";

private Listdatas;

private float angle;

private float radius;

private float maxRadius;//网格最大半径

    private int centerX;//中心X

    private int centerY;//中心Y

    private float maxValue =100;//数据最大值

    private PaintmainPaint;//雷达区画笔

    private PaintvaluePaint;//数据区画笔

    private PainttextPaint;//文本画笔

    private PaintcirclePaint;//圆形画笔

    private int mainColor = Color.parseColor("#FD8BBA");

private int circleColor = Color.parseColor("#33ffffff");

private int defaultColor = Color.WHITE;

public void setDatas(List datas) {

this.datas = datas;

angle = (float) (Math.PI *2 / datas.size());

postInvalidate();

}

public void updateDatas(List datas) {

this.datas = datas;

angle = (float) (Math.PI *2 / datas.size());

postInvalidate();

}

/**

* 设置雷达图非白色的颜色

* main_color 雷达框框颜色

* circle_color 文字后面的圆形背景颜色

* default_color 雷达框内绘制区和绘制区圆点颜色

*/

    public void setBgColor(int main_color,int circle_color,int default_color) {

this.mainColor = main_color;

this.circleColor = circle_color;

this.defaultColor = default_color;

mainPaint.setColor(mainColor);

valuePaint.setColor(defaultColor);

circlePaint.setColor(circleColor);

}

public static class ItemInfo {

private Stringtitle;

private int value;

public ItemInfo(String title,int value) {

this.title = title;

this.value = value;

}

}

public RadarView(Context context) {

this(context,null,0);

}

public RadarView(Context context, AttributeSet attrs) {

this(context, attrs,0);

}

public RadarView(Context context, AttributeSet attrs,int defStyleAttr) {

super(context, attrs, defStyleAttr);

mContext = context;

init();

}

private void init() {

mainPaint =new Paint();//雷达区画笔

        mainPaint.setAntiAlias(true);

mainPaint.setStrokeWidth(ViewUtils.dip2px(mContext,1));

mainPaint.setColor(mainColor);

mainPaint.setStyle(Paint.Style.STROKE);

valuePaint =new Paint();//数据区画笔

        valuePaint.setAntiAlias(true);

valuePaint.setColor(defaultColor);

valuePaint.setStyle(Paint.Style.FILL);

textPaint =new Paint();//文本画笔

        textPaint.setAntiAlias(true);

textPaint.setColor(Color.WHITE);

datas =new ArrayList<>();

angle = (float) (Math.PI *2 /datas.size());//每个角的弧度

        circlePaint =new Paint();//圆形画笔

        circlePaint.setAntiAlias(true);

circlePaint.setStyle(Paint.Style.FILL);

circlePaint.setColor(circleColor);

}

@Override

    protected void onSizeChanged(int w,int h,int oldw,int oldh) {

radius = Math.min(h, w) /2 *0.34f;//雷达图半径

        maxRadius =radius / (datas.size() -1) *datas.size();

//中心坐标

        centerX = w /2;

centerY = h /2;

postInvalidate();

super.onSizeChanged(w, h, oldw, oldh);

}

@Override

    protected void onDraw(Canvas canvas) {

drawLines(canvas);

drawText(canvas);

drawRegion(canvas);

}

@Override

    protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int size =0;

int width = getMeasuredWidth();

int height = getMeasuredHeight();

if (width > height) {

size = height;

}else {

size = width;

}

setMeasuredDimension(size, size);

//        setMeasuredDimension(ViewUtils.getScreenWidth(mContext) / 375 * 267,ViewUtils.getScreenWidth(mContext) / 375 * 267);

    }

/**

* 绘制直线

*/

    private void drawLines(Canvas canvas) {

Path path =new Path();

Path pathOut =new Path();

for (int i =0; i

path.reset();

path.moveTo(centerX,centerY);

float x = (float) (centerX +maxRadius * Math.sin(angle * i));

float y = (float) (centerY -maxRadius * Math.cos(angle * i));

path.lineTo(x, y);

if (i ==0)

pathOut.moveTo(x, y);

else

                pathOut.lineTo(x, y);

canvas.drawPath(path,mainPaint);//画出中间分割线

        }

//画出最外层多边形

        pathOut.close();

canvas.drawPath(pathOut,mainPaint);

}

/**

* 绘制文字

* 其实四个象限,是以(centerX, centerY)为圆点的象限

*

    * @param canvas

    */

    private void drawText(Canvas canvas) {

for (int i =0; i

float rx = (float) (centerX +maxRadius *1.77 * Math.sin(angle * i));

float ry = (float) (centerY -maxRadius *1.77 * Math.cos(angle * i));

drawCircle(canvas, rx, ry);//画出文字外边圈

            textPaint.setTextAlign(Paint.Align.CENTER);

textPaint.setTextSize(ViewUtils.sp2px(getContext(),18));

canvas.drawText(String.valueOf(datas.get(i ).value), rx, ry -9,textPaint);

textPaint.setTextSize(ViewUtils.sp2px(getContext(),12));

canvas.drawText(String.valueOf(datas.get(i ).title), rx, ry +40,textPaint);

}

}

/*

*  绘制文字外的圆

*/

    private void drawCircle(Canvas canvas,float x,float y) {

canvas.drawCircle(x, y, ViewUtils.dip2px(mContext,31.5f),circlePaint);

}

/**

* 绘制中间有效区域

*

    * @param canvas

    */

    private void drawRegion(Canvas canvas) {

Path path =new Path();

for (int i =0; i

double percent =datas.get(i).value /maxValue;//计算该数值与最大值比例

//小圆点所在位置距离圆心的距离

            float x = (float) (centerX +maxRadius * Math.sin(angle * i) * percent);

float y = (float) (centerY -maxRadius * Math.cos(angle * i) * percent);

if (i ==0) {

path.moveTo(x, y);

}else {

path.lineTo(x, y);

}

valuePaint.setStyle(Paint.Style.FILL);

canvas.drawCircle(x, y, ViewUtils.dip2px(mContext,2),valuePaint);

}

path.close();

canvas.save();

valuePaint.setColor(defaultColor);

valuePaint.setStyle(Paint.Style.FILL);

valuePaint.setAlpha(90);

canvas.drawPath(path,valuePaint);

canvas.save();

valuePaint.setStrokeWidth(ViewUtils.dip2px(mContext,1));

valuePaint.setColor(defaultColor);

valuePaint.setStyle(Paint.Style.STROKE);

canvas.drawPath(path,valuePaint);

}

public float getMaxValue() {

return maxValue;

}

//设置最大数值

    public void setMaxValue(float maxValue) {

this.maxValue = maxValue;

}

//设置蜘蛛网颜色

    public void setMainPaintColor(int color) {

mainPaint.setColor(color);

}

//设置标题颜色

    public void setTextPaintColor(int color) {

textPaint.setColor(color);

}

//设置覆盖局域颜色

    public void setValuePaintColor(int color) {

valuePaint.setColor(color);

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容