Android RadarView雷达图(蜘蛛网图)的实现代码

公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记

无图言虚空

简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 int layerCount=4

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  drawPolygon(canvas);//画边
  drawLines(canvas);//画线
  drawText(canvas);//描绘文字
  drawRegion(canvas);//覆盖区域
 }

主要这几步,开撸!

自定义RadarView继承View

确定需要使用的变量,初始化paint,计算圆心角

 private int count = 5; //几边形
 private int layerCount = 4; //层数
 private float angle; //每条边对应的圆心角
 private int centerX; //圆心x
 private int centerY; //圆心y
 private float radius; //半径
 private Paint polygonPaint; //边框paint
 private Paint linePaint; //连线paint
 private Paint txtPaint; //文字paint
 private Paint circlePaint; //圆点paint
 private Paint regionColorPaint; //覆盖区域paint
 private Double[] percents = {0.91, 0.35, 0.12, 0.8, 0.5}; //覆盖区域百分比
 private String[] titles = {"dota", "斗地主", "大吉大利,晚上吃鸡", "炉石传说", "跳一跳"};//文字
public RadarView(Context context) {
  this(context, null, 0);
 }

 public RadarView(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  //计算圆心角
  angle = (float) (Math.PI * 2 / count);

  polygonPaint = new Paint();
  polygonPaint.setColor(ContextCompat.getColor(context, R.color.radarPolygonColor));
  polygonPaint.setAntiAlias(true);
  polygonPaint.setStyle(Paint.Style.STROKE);
  polygonPaint.setStrokeWidth(4f);

  linePaint = new Paint();
  linePaint.setColor(ContextCompat.getColor(context, R.color.radarLineColor));
  linePaint.setAntiAlias(true);
  linePaint.setStyle(Paint.Style.STROKE);
  linePaint.setStrokeWidth(2f);

  txtPaint = new Paint();
  txtPaint.setColor(ContextCompat.getColor(context, R.color.radarTxtColor));
  txtPaint.setAntiAlias(true);
  txtPaint.setStyle(Paint.Style.STROKE);
  txtPaint.setTextSize(DensityUtil.dpToPx(context, 12));

  circlePaint = new Paint();
  circlePaint.setColor(ContextCompat.getColor(context, R.color.radarCircleColor));
  circlePaint.setAntiAlias(true);

  regionColorPaint = new Paint();
  regionColorPaint.setColor(ContextCompat.getColor(context, R.color.radarRegionColor));
  regionColorPaint.setStyle(Paint.Style.FILL);
  regionColorPaint.setAntiAlias(true);

 }

确定中心点

需要正五边形得有一个圆,圆内接正五边形,在onSizeChanged方法里获取圆心,确定半径

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  radius = Math.min(h, w) / 2 * 0.7f;
  centerX = w / 2;
  centerY = h / 2;
 }

绘制正五边形

绘制正五边形同时描绘最外围的点,确定分为4层,半径 / 层数 =每层之间的间距,从最里层开始画正五边形,每层第一个点位于中心点正上方

private void drawPolygon(Canvas canvas) {
  Path path = new Path();
  float r = radius / layerCount;
  for (int i = 1; i <= layerCount; i++) {
   float curR = r * i; //当前所在层的半径
   for (int j = 0; j < count; j++) {
    if (j == 0) {
     //每一层第一个点坐标
     path.moveTo(centerX, centerY - curR);
    } else {
     //顺时针记录其余顶角的点坐标
     float x = (float) (centerX + Math.sin(angle * j) * curR);
     float y = (float) (centerY - Math.cos(angle * j) * curR);
     path.lineTo(x, y);
    }
   }
   //最外层的顶角外面的五个小圆点(图中红色部分)
   if (i == layerCount) {
    for (int j = 0; j < count; j++) {
     float x = (float) (centerX + Math.sin(angle * j) * (curR + 12));
     float y = (float) (centerY - Math.cos(angle * j) * (curR + 12));
     canvas.drawCircle(x, y, 4, circlePaint);
    }
   }
   path.close();
   canvas.drawPath(path, polygonPaint);
  }
 }

绘制连线

绘制最内层顶角到最外层顶角的连线

 private void drawLines(Canvas canvas) {
  float r = radius / layerCount;
  for (int i = 0; i < count; i++) {
   //起始坐标 从中心开始的话 startx=centerX , startY=centerY
   float startX = (float) (centerX + Math.sin(angle * i) * r);
   float startY = (float) (centerY - Math.cos(angle * i) * r);
   //末端坐标
   float endX = (float) (centerX + Math.sin(angle * i) * radius);
   float endY = (float) (centerY - Math.cos(angle * i) * radius);
   canvas.drawLine(startX, startY, endX, endY, linePaint);
  }
 }

至此简易雷达图成型,可以修改正几边形,多少层数(后续继续添加文字)

 //设置几边形,**注意:设置几边形需要重新计算圆心角**
 public void setCount(int count){
  this.count = count;
  angle = (float) (Math.PI * 2 / count);
  invalidate();
 }

 //设置层数
 public void setLayerCount(int layerCount){
  this.layerCount = layerCount;
  invalidate();
 }

设置正六边形、六层

 radarView.setCount(6);
 radarView.setLayerCount(6);

对于以下图形的,可以设置第一个点坐标位于中心点正右侧 (centerX+curR,centerY) ,顺时针计算其余顶点坐标 x = (float) (centerX+curR*Math.cos(angle*j)), y = (float) (centerY+curR*Math.sin(angle*j)) ,同理连线等其余坐标相应改变...

描绘文字

由于各产品维度内容不同,所需雷达图样式不一,这里只是描绘下不同位置的文字处理情况,具体需求还得按产品来,因产品而异

private void drawText(Canvas canvas) {
  for (int i = 0; i < count; i++) {
   //获取到雷达图最外边的坐标
   float x = (float) (centerX + Math.sin(angle * i) * (radius + 12));
   float y = (float) (centerY - Math.cos(angle * i) * (radius + 12));
   if (angle * i == 0) {
    //第一个文字位于顶角正上方
    txtPaint.setTextAlign(Paint.Align.CENTER);
    canvas.drawText(titles[i], x, y - 18, txtPaint);
    txtPaint.setTextAlign(Paint.Align.LEFT);
   } else if (angle * i > 0 && angle * i < Math.PI / 2) {
    //微调
    canvas.drawText(titles[i], x + 18, y + 10, txtPaint);
   } else if (angle * i >= Math.PI / 2 && angle * i < Math.PI) {
    //最右下的文字获取到文字的长、宽,按文字长度百分比向左移
    String txt = titles[i];
    Rect bounds = new Rect();
    txtPaint.getTextBounds(txt, 0, txt.length(), bounds);
    float height = bounds.bottom - bounds.top;
    float width = txtPaint.measureText(txt);
    canvas.drawText(txt, x - width * 0.4f, y + height + 18, txtPaint);
   } else if (angle * i >= Math.PI && angle * i < 3 * Math.PI / 2) {
    //同理最左下的文字获取到文字的长、宽,按文字长度百分比向左移
    String txt = titles[i];
    Rect bounds = new Rect();
    txtPaint.getTextBounds(txt, 0, txt.length(), bounds);
    float width = txtPaint.measureText(txt);
    float height = bounds.bottom - bounds.top;
    canvas.drawText(txt, x - width * 0.6f, y + height + 18, txtPaint);
   } else if (angle * i >= 3 * Math.PI / 2 && angle * i < 2 * Math.PI) {
    //文字向左移动
    String txt = titles[i];
    float width = txtPaint.measureText(txt);
    canvas.drawText(txt, x - width - 18, y + 10, txtPaint);
   }

  }
 }

绘制覆盖区域

绘制覆盖区域,百分比取连线长度的百分比(如果从中心点开始的连线,则是半径的百分比),此处用半径radius减去间隔r即连线长度

 private void drawRegion(Canvas canvas) {
  Path path = new Path();
  float r = radius / layerCount;//每层的间距
  for (int i = 0; i < count; i++) {
   if (i == 0) {
    path.moveTo(centerX, (float) (centerY - r - (radius - r) * percents[i]));
   } else {
    float x = (float) (centerX + Math.sin(angle * i) * (percents[i] * (radius - r) + r));
    float y = (float) (centerY - Math.cos(angle * i) * (percents[i] * (radius - r) + r));
    path.lineTo(x, y);
   }
  }
  path.close();
  canvas.drawPath(path, regionColorPaint);
 }

至此,一个简单的雷达图完毕。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿支付宝上芝麻信用分雷达图

    一.首先看下支付宝上芝麻信用分的效果图: 二.思路 1.确定雷达图中心点坐标 2.绘制多边形及连接线 3.根据维度值绘制覆盖区域 4.绘制分数 5.绘制每个维度的标题文字和图标 三.实现 获取布局的中心坐标 在onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根据View的长宽,计算出雷达图的半径(这里取布局宽高最小值的四分之一,可以自定义),获取整个布局的中心坐标. public class CreditScoreView extends

  • Android RadarView雷达图(蜘蛛网图)的实现代码

    公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 int layerCount=4 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawPolygon(canvas);//画边 drawLines(canvas);//画线 drawText(canvas)

  • Android自定义View实现折线图效果

    下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

  • Android RollPagerView实现轮播图

    Android RollPagerView实现轮播图 android图片轮播效果,RollViewPager的简单使用  <com.jude.rollviewpager.RollPagerView android:id="@+id/mViewPager" android:layout_width="match_parent" android:layout_height="170dp" app:rollviewpager_play_delay

  • Android实现朋友圈多图显示功能

    本文实例为大家分享了Android实现朋友圈多图显示的具体代码,供大家参考,具体内容如下 Android实现朋友圈评论回复列表 Android实现朋友圈点赞列表 Android实现朋友圈多图显示功能 正文 先看一下效果图: MultiImageView: public class MultiImageView extends LinearLayout { public static int MAX_WIDTH = 0; // 照片的Url列表 private List<String> imag

  • Android实现ViewPage轮播图效果

    在android移动端的开发中,首页轮播图是一个特别常见的功能,所以今天就来将最近写的一个小demo记录一下. 首先当然是新建一个项目代码如下: activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to

  • Android WebView实现截长图功能

    本文实例为大家分享了Android实现截长图功能的具体代码,供大家参考,具体内容如下 先看看手机自带的长截屏功能:  机型: vivo x9 plus 大胆推测实现逻辑: 1:需要一个可以滚动的View 2:截取View在屏幕渲染的内容 3:不断滚动View,截取View渲染的内容,存储到容器中 4:将容器中图片,按顺序拼接组装起来. 5.保存 根据我们推测的逻辑,一步步实现: 1.我们这里以WebView控件为介绍对象 <WebView android:id="@+id/web_view

  • Android实现自动轮播图效果

    本文实例为大家分享了Android实现轮播图效果展示的具体代码,供大家参考,具体内容如下 MainActivity.java public class MainActivity extends AppCompatActivity { private LinearLayout ll_dots; private TextView viewpager_tv; // 将ViewPager定义为全局变量,方便使用. private ViewPager viewpager_vp; // 建立一个ArrayL

  • Android开发自定义控件之折线图实现方法详解

    本文实例讲述了Android开发自定义控件之折线图实现方法.分享给大家供大家参考,具体如下: 前言 折线图是Android开发中经常会碰到的效果,但由于涉及自定义View的知识,对许多刚入门的小白来说会觉得很高深.其实不然,接下来我就以尽量通俗的语言来说明下图折线图效果的实现过程. 效果图 实现过程 首先,选择自定义控件的方式. 自定义控件的实现有四种方式: 1.继承View,重写onDraw.onMeasure等方法. 2.继承已有的View(比如TextView). 3.继承ViewGrou

  • Android ViewPager自定义轮播图并解决播放冲突

    本文实例为大家分享了Android ViewPager自定义轮播图,并解决播放冲突,供大家参考 首先介绍一下这篇小代码: 注释全面,简单易学,适用初学者,图片自拟!!! 一定要将ArrayList集合&Handler机制传到适配器,否则无法完成展示,也解决不了滑动冲突,代码有点多,但是它通俗易懂啊 layout布局内写法: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:

  • Android画图实现MPAndroidchart折线图示例详解

    目录 效果图 依赖 activity.xml MainActivity MyMarkerView 自定义class maekertextview .xml 常用属性 效果图 用的是3.1.0的依赖 依赖 allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } //依赖 dependencies{ implementation 'com.github.PhilJay:MPAndroidCh

随机推荐