java 雷达图_Android雷达图(蜘蛛网图)，自定义view之雷达图，正五边雷达图，分数图...

最近业务要做分数雷达图，到网上找了很大，原理都差不多，但是要适用自己的业务，还需要微调。下面是我微调后的效果图

雷达图蜘蛛网.png

原理很简单

1，确定雷达图中心点的坐标

2，用正三角sin，反三角函数cos计算五个类别的坐标点

3，绘制蜘蛛网

4，绘制直线

5，绘制覆盖区域(包含红点)

下面结合代码给大家讲解下

-1, 下面是需要用到的一些属性

public class RadarView extends View {

//数据个数

private int count = 5;

//成绩圆点半径

private int valueRadius = 8;

//网格最大半径

private float radius;

//中心X

private float centerX;

//中心Y

private float centerY;

//雷达区画笔

private Paint mainPaint;

//文本画笔

private Paint textPaint;

//数据区画笔

private Paint valuePaint;

//标题文字

private List titles;

//各维度分值

private List data;

//数据最大值

private double maxValue = 100;

//弧度

private float angle;

}

2，获取中心点坐标

这个是在view的onSizeChanged方法里获取当前view的宽高，取宽高的小值，然后再找中心点作为雷达图的中心点。这样做的好处是可以使雷达图自适应

@Override

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

radius = Math.min(w, h) / 2 * 0.8f;

centerX = w / 2;

centerY = h / 2;

//一旦size发生改变，重新绘制

postInvalidate();

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

}

3，开始绘制

@Override

protected void onDraw(Canvas canvas) {

drawPolygon(canvas);//绘制蜘蛛网

drawLines(canvas);//绘制直线

drawTitle(canvas);//绘制标题

drawRegion(canvas);//绘制覆盖区域

}

下面贴出所有代码，代码里有很详细的注释

package com.example.qcl.demo.radarmap;

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;

import java.util.List;

/**

* 2018/6/15 11:09

* Created by qcl

* wechat：2501902696

*/

public class RadarView extends View {

//数据个数

private int count = 5;

//成绩圆点半径

private int valueRadius = 8;

//网格最大半径

private float radius;

//中心X

private float centerX;

//中心Y

private float centerY;

//雷达区画笔

private Paint mainPaint;

//文本画笔

private Paint textPaint;

//数据区画笔

private Paint valuePaint;

//标题文字

private List titles;

//各维度分值

private List data;

//数据最大值

private double m